chore: bump React Native to 0.64 RC

.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/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/errors.js

@@ -10,7 +10,7 @@ export class ErrorWithStack extends Error {
   }
 }
 
-export const createLibraryNotSupportedError = (error: Error) =>
+export const createLibraryNotSupportedError = (error: Error): Error =>
   new Error(
     `Currently the only supported library to search by text is "react-native".\n\n${error.message}`
   );
@@ -19,7 +19,7 @@ export const prepareErrorMessage = (
   error: Error,
   name: ?string,
   value: ?mixed
-) => {
+): string => {
   // Strip info about custom predicate
   let errorMessage = error.message.replace(
     / matching custom predicate[^]*/gm,
@@ -32,7 +32,7 @@ export const prepareErrorMessage = (
   return errorMessage;
 };
 
-export const createQueryByError = (error: Error, callsite: Function) => {
+export const createQueryByError = (error: Error, callsite: Function): null => {
   if (error.message.includes('No instances found')) {
     return null;
   }

src/helpers/findByAPI.js

@@ -13,55 +13,132 @@ import {
 } from './getByAPI';
 import { throwRenamedFunctionError } from './errors';
 
+export type FindByAPI = {|
+  findAllByDisplayValue: (
+    value: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<Array<ReactTestInstance>>,
+  findAllByPlaceholder: () => void,
+  findAllByPlaceholderText: (
+    placeholder: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<Array<ReactTestInstance>>,
+  findAllByTestId: (
+    testId: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<Array<ReactTestInstance>>,
+  findAllByText: (
+    text: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<Array<ReactTestInstance>>,
+  findByDisplayValue: (
+    value: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<ReactTestInstance>,
+  findByPlaceholder: () => void,
+  findByPlaceholderText: (
+    placeholder: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<ReactTestInstance>,
+  findByTestId: (
+    testId: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<ReactTestInstance>,
+  findByText: (
+    text: string | RegExp,
+    waitForOptions?: WaitForOptions
+  ) => Promise<ReactTestInstance>,
+|};
+
 const makeFindQuery = <Text, Result>(
   instance: ReactTestInstance,
   getQuery: (instance: ReactTestInstance) => (text: Text) => Result,
   text: Text,
   waitForOptions: WaitForOptions
 ): Promise<Result> => waitFor(() => getQuery(instance)(text), waitForOptions);
 
-export const findByTestId = (instance: ReactTestInstance) => (
+export const findByTestId = (
+  instance: ReactTestInstance
+): ((
+  testId: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<ReactTestInstance>) => (
   testId: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getByTestId, testId, waitForOptions);
 
-export const findAllByTestId = (instance: ReactTestInstance) => (
+export const findAllByTestId = (
+  instance: ReactTestInstance
+): ((
+  testId: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<Array<ReactTestInstance>>) => (
   testId: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getAllByTestId, testId, waitForOptions);
 
-export const findByText = (instance: ReactTestInstance) => (
+export const findByText = (
+  instance: ReactTestInstance
+): ((
+  text: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<ReactTestInstance>) => (
   text: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getByText, text, waitForOptions);
 
-export const findAllByText = (instance: ReactTestInstance) => (
+export const findAllByText = (
+  instance: ReactTestInstance
+): ((
+  text: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<Array<ReactTestInstance>>) => (
   text: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getAllByText, text, waitForOptions);
 
-export const findByPlaceholderText = (instance: ReactTestInstance) => (
+export const findByPlaceholderText = (
+  instance: ReactTestInstance
+): ((
+  placeholder: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<ReactTestInstance>) => (
   placeholder: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getByPlaceholderText, placeholder, waitForOptions);
 
-export const findAllByPlaceholderText = (instance: ReactTestInstance) => (
+export const findAllByPlaceholderText = (
+  instance: ReactTestInstance
+): ((
+  placeholder: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<Array<ReactTestInstance>>) => (
   placeholder: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) =>
   makeFindQuery(instance, getAllByPlaceholderText, placeholder, waitForOptions);
 
-export const findByDisplayValue = (instance: ReactTestInstance) => (
+export const findByDisplayValue = (
+  instance: ReactTestInstance
+): ((
+  value: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<ReactTestInstance>) => (
   value: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getByDisplayValue, value, waitForOptions);
 
-export const findAllByDisplayValue = (instance: ReactTestInstance) => (
+export const findAllByDisplayValue = (
+  instance: ReactTestInstance
+): ((
+  value: string | RegExp,
+  waitForOptions?: WaitForOptions
+) => Promise<Array<ReactTestInstance>>) => (
   value: string | RegExp,
   waitForOptions: WaitForOptions = {}
 ) => makeFindQuery(instance, getAllByDisplayValue, value, waitForOptions);
 
-export const findByAPI = (instance: ReactTestInstance) => ({
+export const findByAPI = (instance: ReactTestInstance): FindByAPI => ({
   findByTestId: findByTestId(instance),
   findByText: findByText(instance),
   findByPlaceholderText: findByPlaceholderText(instance),

src/helpers/format.js

@@ -1,7 +1,7 @@
 // @flow
 import prettyFormat, { plugins } from 'pretty-format';
 
-const format = (input: ?ReactTestRendererJSON) =>
+const format = (input: ?ReactTestRendererJSON): any =>
   prettyFormat(input, {
     plugins: [plugins.ReactTestComponent, plugins.ReactElement],
     highlight: true,