fix: use actual react-native instead of homegrown mocks (#36)

<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Summary

This actually uncovered some bugs, like lack of `onDoublePress` (lol XD) and enabled us to have better snapshots for deep rendering.

### Test plan

no new tests

.flowconfig

@@ -1,5 +1,69 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+
+[include]
+
 [libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+node_modules/react-native/flow-github/
 flow-typed
 
 [options]
+emoji=true
+
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
+module.system=haste
+module.system.haste.use_name_reducers=true
+# get basename
+module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
+# strip .js or .js.flow suffix
+module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
+# strip .ios suffix
+module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
+module.system.haste.paths.blacklist=.*/__tests__/.*
+module.system.haste.paths.blacklist=.*/__mocks__/.*
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
 include_warnings=true
+
+[untyped]
+; bugs in react-native typings
+.*/Libraries/Components/Navigation/NavigatorIOS.ios.js
+.*/Libraries/Components/TextInput/InputAccessoryView.js
+.*/Libraries/Components/View/ViewPropTypes.js
+.*/Libraries/YellowBox/UI/YellowBoxInspectorFooter.js
+.*/Libraries/YellowBox/UI/YellowBoxList.js
+
+[version]
+^0.83.0

README.md

@@ -193,25 +193,6 @@ const { getByTestId } = render(
 fireEvent.press(getByTestId('button'));
 ```
 
-### `fireEvent.doublePress: (element: ReactTestInstance) => void`
-
-Invokes `doublePress` event handler on the element or parent element in the tree.
-
-```jsx
-import { TouchableOpacity, Text } from 'react-native';
-import { render, fireEvent } from 'react-native-testing-library';
-
-const onDoublePressMock = jest.fn();
-
-const { getByTestId } = render(
-  <TouchableOpacity onDoublePress={onDoublePressMock}>
-    <Text testID="button-text">Click me</Text>
-  </TouchableOpacity>
-);
-
-fireEvent.doublePress(getByTestId('button-text'));
-```
-
 ### `fireEvent.changeText: (element: ReactTestInstance, data?: *) => void`
 
 Invokes `changeText` event handler on the element or parent element in the tree.

package.json

@@ -21,8 +21,9 @@
     "jest": "^23.6.0",
     "metro-react-native-babel-preset": "^0.48.0",
     "pretty-format": "^23.6.0",
-    "react": "^16.5.2",
+    "react": "16.6.0-alpha.8af6728",
-    "react-test-renderer": "^16.5.2",
+    "react-native": "^0.57.3",
+    "react-test-renderer": "16.6.0-alpha.8af6728",
     "typescript": "^3.1.1"
   },
   "peerDependencies": {
@@ -35,5 +36,8 @@
     "flow-check": "flow check",
     "typescript-check": "tsc --noEmit --skipLibCheck --jsx react ./typings/__tests__/*",
     "lint": "eslint src --cache"
+  },
+  "jest": {
+    "preset": "react-native"
   }
 }

src/__mocks__/reactNativeMock.js

@@ -1,6 +0,0 @@
-// @flow
-export const View = (props: *) => props.children;
-export const ScrollView = (props: *) => props.children;
-export const Text = (props: *) => props.children;
-export const TextInput = () => null;
-export const TouchableOpacity = (props: *) => props.children;

src/__tests__/__snapshots__/render.test.js.snap

@@ -1,3 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`toJSON 1`] = `"press me"`;
+exports[`toJSON 1`] = `
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <Text>
+    press me
+  </Text>
+</View>
+`;

src/__tests__/__snapshots__/shallow.test.js.snap

@@ -1,31 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`shallow rendering React Test Instance 1`] = `
-<TouchableOpacity
+<TouchableText
-  onPress={[Function]}
+  accessible={true}
-  testID="button"
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+  forwardedRef={null}
+  testID="text-button"
 >
-  <Text
+  Press me
-    testID="text-button"
+</TouchableText>
-  >
-    Press me
-  </Text>
-</TouchableOpacity>
 `;
 
 exports[`shallow rendering React elements 1`] = `
-<View
+<Component>
-  testID="root"
+  <Component
->
+    testID="text-button"
-  <TouchableOpacity
-    onPress={[Function]}
-    testID="button"
   >
-    <Text
+    Press me
-      testID="text-button"
+  </Component>
-    >
+</Component>
-      Press me
-    </Text>
-  </TouchableOpacity>
-</View>
 `;

src/__tests__/fireEvent.test.js

@@ -6,7 +6,7 @@ import {
   Text,
   ScrollView,
   TextInput,
-} from '../__mocks__/reactNativeMock';
+} from 'react-native';
 import { render, fireEvent } from '..';
 
 const OnPressComponent = ({ onPress }) => (
@@ -29,12 +29,6 @@ const CustomEventComponent = ({ onCustomEvent }) => (
   </TouchableOpacity>
 );
 
-const DoublePressComponent = ({ onDoublePress }) => (
-  <TouchableOpacity onDoublePress={onDoublePress}>
-    <Text testID="button-text">Click me</Text>
-  </TouchableOpacity>
-);
-
 describe('fireEvent', () => {
   test('should invoke specified event', () => {
     const onPressMock = jest.fn();
@@ -120,17 +114,6 @@ test('fireEvent.scroll', () => {
   expect(onScrollMock).toHaveBeenCalledWith(eventData);
 });
 
-test('fireEvent.doublePress', () => {
-  const onDoublePressMock = jest.fn();
-  const { getByTestId } = render(
-    <DoublePressComponent onDoublePress={onDoublePressMock} />
-  );
-
-  fireEvent.doublePress(getByTestId('button-text'));
-
-  expect(onDoublePressMock).toHaveBeenCalled();
-});
-
 test('fireEvent.changeText', () => {
   const onChangeTextMock = jest.fn();
   const CHANGE_TEXT = 'content';

src/__tests__/render.test.js

@@ -1,7 +1,7 @@
 // @flow
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
-import { View, Text, TouchableOpacity } from '../__mocks__/reactNativeMock';
+import { View, Text, TouchableOpacity } from 'react-native';
 import { render } from '..';
 
 class Button extends React.Component<*> {

src/__tests__/shallow.test.js

@@ -1,25 +1,23 @@
 // @flow
 import React from 'react';
-import { View, TouchableOpacity, Text } from '../__mocks__/reactNativeMock';
+import { View, Text } from 'react-native';
 import { shallow, render } from '..';
 
-const OnPressComponent = ({ onPress }) => (
+const TextPress = () => (
-  <View testID="root">
+  <View>
-    <TouchableOpacity onPress={onPress} testID="button">
+    <Text testID="text-button">Press me</Text>
-      <Text testID="text-button">Press me</Text>
-    </TouchableOpacity>
   </View>
 );
 
 test('shallow rendering React elements', () => {
-  const { output } = shallow(<OnPressComponent onPress={jest.fn} />);
+  const { output } = shallow(<TextPress />);
 
   expect(output).toMatchSnapshot();
 });
 
 test('shallow rendering React Test Instance', () => {
-  const { getByTestId } = render(<OnPressComponent onPress={jest.fn} />);
+  const { getByTestId } = render(<TextPress />);
-  const { output } = shallow(getByTestId('root'));
+  const { output } = shallow(getByTestId('text-button'));
 
   expect(output).toMatchSnapshot();
 });

src/__tests__/waitForElement.test.js

@@ -1,7 +1,7 @@
 // @flow
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
-import { View, Text, TouchableOpacity } from '../__mocks__/reactNativeMock';
+import { View, Text, TouchableOpacity } from 'react-native';
 import { render, fireEvent, waitForElement } from '..';
 
 class Banana extends React.Component<*, *> {
@@ -13,7 +13,7 @@ class Banana extends React.Component<*, *> {
     return (
       <View>
         {this.props.fresh && <Text testID="fresh">Fresh</Text>}
-        <TouchableOpacity onPress={this.changeFresh} type="primary">
+        <TouchableOpacity onPress={this.changeFresh}>
           Change freshness!
         </TouchableOpacity>
       </View>

src/fireEvent.js

@@ -34,8 +34,6 @@ const toEventHandlerName = (eventName: string) =>
 
 const pressHandler = (element: ReactTestInstance) =>
   invokeEvent(element, 'press');
-const doublePressHandler = (element: ReactTestInstance) =>
-  invokeEvent(element, 'doublePress');
 const changeTextHandler = (element: ReactTestInstance, data?: *) =>
   invokeEvent(element, 'changeText', data);
 const scrollHandler = (element: ReactTestInstance, data?: *) =>
@@ -44,7 +42,6 @@ const scrollHandler = (element: ReactTestInstance, data?: *) =>
 const fireEvent = invokeEvent;
 
 fireEvent.press = pressHandler;
-fireEvent.doublePress = doublePressHandler;
 fireEvent.changeText = changeTextHandler;
 fireEvent.scroll = scrollHandler;
 

typings/__tests__/index.test.tsx

@@ -71,7 +71,6 @@ tree.unmount();
 fireEvent(getByNameString, 'press');
 fireEvent(getByNameString, 'press', 'data');
 fireEvent.press(getByNameString);
-fireEvent.doublePress(getByNameString);
 fireEvent.changeText(getByNameString, 'string');
 fireEvent.scroll(getByNameString, 'eventData');
 

typings/index.d.ts

@@ -41,7 +41,6 @@ export type FireEventFunction = (
 
 export type FireEventAPI = FireEventFunction & {
   press: (element: ReactTestInstance) => any;
-  doublePress: (element: ReactTestInstance) => any;
   changeText: (element: ReactTestInstance, data?: any) => any;
   scroll: (element: ReactTestInstance, data?: any) => any;
 };