chore: bump React Native to 0.64 RC (#626)

* chore: bump React Native to 0.64 RC

* Snapshot update

* Bumped node version to 12 on CI

* Removed removed supress_comment syntax from config

* codemod types-first

* Prettied files after codemod

* Added flow types to API returns

* don't return null from fireEvent handlers

* return ReactTestInstance instead of any

* fix render returning any

* less anys

* less anys

* simplify call type

* simplify

* add Flow to missing files, type debug better

Co-authored-by: Michał Parkitny <[email protected]>
Co-authored-by: Michał Pierzchała <[email protected]>

Author: 3 people

.circleci/config.yml

@@ -12,7 +12,7 @@ aliases:
 
 defaults: &defaults
   docker:
-    - image: circleci/node:10
+    - image: circleci/node:12
   working_directory: ~/react-native-testing-library
 
 jobs:

.flowconfig

@@ -32,6 +32,9 @@ emoji=true
 esproposal.optional_chaining=enable
 esproposal.nullish_coalescing=enable
 
+well_formed_exports=true
+types_first=true
+
 module.file_ext=.js
 module.file_ext=.json
 module.file_ext=.ios.js
@@ -41,15 +44,6 @@ munge_underscores=true
 module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
 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\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
 
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FlowFixMeProps
-suppress_type=$FlowFixMeState
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [lints]
 sketchy-null-number=warn
 sketchy-null-mixed=warn

package.json

@@ -34,19 +34,19 @@
     "@callstack/eslint-config": "^10.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/jest-native": "~3.4.3",
-    "@types/react": "^16.9.34",
+    "@types/react": "^17.0.0",
     "@types/react-native": "^0.63.0",
     "@types/react-test-renderer": "^17.0.0",
     "babel-jest": "^26.0.1",
     "conventional-changelog-cli": "^2.0.11",
     "dedent": "^0.7.0",
     "eslint": "^7.0.0",
-    "flow-bin": "^0.122.0",
+    "flow-bin": "^0.137.0",
     "flow-copy-source": "^2.0.9",
     "jest": "^26.0.1",
-    "react": "^16.13.1",
-    "react-native": "^0.63.0-rc.1",
-    "react-test-renderer": "^16.13.1",
+    "react": "^17.0.1",
+    "react-native": "^0.64.0-rc.1",
+    "react-test-renderer": "^17.0.1",
     "release-it": "^14.0.3",
     "strip-ansi": "^6.0.0",
     "typescript": "^4.0.2"

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

@@ -134,15 +134,15 @@ exports[`debug: shallow 1`] = `
   >
     not fresh
   </Text>
-  <Component
+  <TextInput
     allowFontScaling={true}
     placeholder=\\"Add custom freshness\\"
     rejectResponderTermination={true}
     testID=\\"bananaCustomFreshness\\"
     underlineColorAndroid=\\"transparent\\"
     value=\\"Custom Freshie\\"
   />
-  <Component
+  <TextInput
     allowFontScaling={true}
     placeholder=\\"Who inspected freshness?\\"
     rejectResponderTermination={true}
@@ -184,15 +184,15 @@ exports[`debug: shallow with message 1`] = `
   >
     not fresh
   </Text>
-  <Component
+  <TextInput
     allowFontScaling={true}
     placeholder=\\"Add custom freshness\\"
     rejectResponderTermination={true}
     testID=\\"bananaCustomFreshness\\"
     underlineColorAndroid=\\"transparent\\"
     value=\\"Custom Freshie\\"
   />
-  <Component
+  <TextInput
     allowFontScaling={true}
     placeholder=\\"Who inspected freshness?\\"
     rejectResponderTermination={true}

src/__tests__/auto-cleanup-skip.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { View } from 'react-native';
 

src/__tests__/auto-cleanup.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { View } from 'react-native';
 import { render } from '..';

src/act.js

@@ -1,8 +1,9 @@
 // @flow
 import { act } from 'react-test-renderer';
+import type { Thenable } from './types.flow';
 
 const actMock = (callback: () => void) => {
   callback();
 };
 
-export default act || actMock;
+export default (act || actMock: (callback: () => void) => Thenable);

src/fireEvent.js

@@ -89,7 +89,7 @@ const invokeEvent = (
   const handler = findEventHandler(element, eventName, callsite);
 
   if (!handler) {
-    return null;
+    return;
   }
 
   let returnValue;
@@ -104,18 +104,20 @@ const invokeEvent = (
 const toEventHandlerName = (eventName: string) =>
   `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
 
-const pressHandler = (element: ReactTestInstance) =>
+const pressHandler = (element: ReactTestInstance): void =>
   invokeEvent(element, 'press', pressHandler);
-const changeTextHandler = (element: ReactTestInstance, ...data: Array<any>) =>
-  invokeEvent(element, 'changeText', changeTextHandler, ...data);
-const scrollHandler = (element: ReactTestInstance, ...data: Array<any>) =>
+const changeTextHandler = (
+  element: ReactTestInstance,
+  ...data: Array<any>
+): void => invokeEvent(element, 'changeText', changeTextHandler, ...data);
+const scrollHandler = (element: ReactTestInstance, ...data: Array<any>): void =>
   invokeEvent(element, 'scroll', scrollHandler, ...data);
 
 const fireEvent = (
   element: ReactTestInstance,
   eventName: string,
   ...data: Array<any>
-) => invokeEvent(element, eventName, fireEvent, ...data);
+): void => invokeEvent(element, eventName, fireEvent, ...data);
 
 fireEvent.press = pressHandler;
 fireEvent.changeText = changeTextHandler;

src/helpers/a11yAPI.js

@@ -6,11 +6,11 @@ import makeQuery from './makeQuery';
 type GetReturn = ReactTestInstance;
 type GetAllReturn = Array<ReactTestInstance>;
 type QueryReturn = ReactTestInstance | null;
-type QueryAllReturn = Array<ReactTestInstance> | [];
+type QueryAllReturn = Array<ReactTestInstance>;
 type FindReturn = Promise<GetReturn>;
 type FindAllReturn = Promise<GetAllReturn>;
 
-type A11yAPI = {|
+export type A11yAPI = {|
   // Label
   getByA11yLabel: (string | RegExp) => GetReturn,
   getByLabelText: (string | RegExp) => GetReturn,
@@ -116,7 +116,7 @@ export function matchObject<T: {}>(prop?: T, matcher: T): boolean {
     : false;
 }
 
-const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
+export const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
   ({
     ...makeQuery(
       'accessibilityLabel',
@@ -239,5 +239,3 @@ const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
       matchObject
     )(instance),
   }: any);
-
-export default a11yAPI;

src/helpers/debugDeep.js

@@ -6,7 +6,7 @@ import format from './format';
  */
 export default function debugDeep(
   instance: ?ReactTestRendererJSON,
-  message?: any = ''
+  message?: string
 ) {
   if (message) {
     console.log(`${message}\n\n`, format(instance));