Feat(breaking): unify wait for element signature with testing library (#327)

* Change argument to options object

* Renamed `waitForElement` to `waitFor`

* Migration guide entry

* Fixed typescript check

* Update src/helpers/a11yAPI.js

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

* (Nearly) Empty migration doc for ver. 2.0 (#326)

* Added migration docs section

* Added to docosaurus side bar

* Updated README

* Increased async test timeout

* Update website/docs/Migration20.md

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

* feat(breaking): remove legacy `debug` export (#328)

* Removed global `debug` functions

* Removed global `debug` from docs

* Cleanup

* Added migration section

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

src/__tests__/waitFor.test.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
-import { render, fireEvent, waitForElement } from '..';
+import { render, fireEvent, waitFor } from '..';
 
 class Banana extends React.Component<any> {
   changeFresh = () => {
@@ -42,7 +42,7 @@ test('waits for element until it stops throwing', async () => {
 
   expect(queryByText('Fresh')).toBeNull();
 
-  const freshBananaText = await waitForElement(() => getByText('Fresh'));
+  const freshBananaText = await waitFor(() => getByText('Fresh'));
 
   expect(freshBananaText.props.children).toBe('Fresh');
 });
@@ -52,7 +52,9 @@ test('waits for element until timeout is met', async () => {
 
   fireEvent.press(getByName('TouchableOpacity'));
 
-  await expect(waitForElement(() => getByText('Fresh'), 100)).rejects.toThrow();
+  await expect(
+    waitFor(() => getByText('Fresh'), { timeout: 100 })
+  ).rejects.toThrow();
 });
 
 test('waits for element with custom interval', async () => {
@@ -61,7 +63,7 @@ test('waits for element with custom interval', async () => {
   });
 
   try {
-    await waitForElement(() => mockFn(), 400, 200);
+    await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
   } catch (e) {
     // suppress
   }
@@ -77,7 +79,7 @@ test('works with fake timers', async () => {
   });
 
   try {
-    waitForElement(() => mockFn(), 400, 200);
+    waitFor(() => mockFn(), { timeout: 400, interval: 200 });
   } catch (e) {
     // suppress
   }

src/helpers/a11yAPI.js

@@ -1,6 +1,6 @@
 // @flow
 import type { A11yRole, A11yStates, A11yState, A11yValue } from '../types.flow';
-import type { WaitForOptions } from './findByAPI';
+import type { WaitForOptions } from '../waitFor';
 import makeQuery from './makeQuery';
 
 type GetReturn = ReactTestInstance;

src/helpers/findByAPI.js

@@ -1,5 +1,6 @@
 // @flow
-import waitForElement from '../waitForElement';
+import waitFor from '../waitFor';
+import type { WaitForOptions } from '../waitFor';
 import {
   getByTestId,
   getAllByTestId,
@@ -11,22 +12,12 @@ import {
   getAllByDisplayValue,
 } from './getByAPI';
 
-export type WaitForOptions = {
-  timeout?: number,
-  interval?: number,
-};
-
 const makeFindQuery = <Text, Result>(
   instance: ReactTestInstance,
   getQuery: (instance: ReactTestInstance) => (text: Text) => Result,
   text: Text,
   waitForOptions: WaitForOptions
-): Promise<Result> =>
-  waitForElement(
-    () => getQuery(instance)(text),
-    waitForOptions.timeout,
-    waitForOptions.interval
-  );
+): Promise<Result> => waitFor(() => getQuery(instance)(text), waitForOptions);
 
 export const findByTestId = (instance: ReactTestInstance) => (
   testId: string,

src/helpers/makeQuery.js

@@ -1,11 +1,11 @@
 // @flow
-import waitForElement from '../waitForElement';
+import waitFor from '../waitFor';
+import type { WaitForOptions } from '../waitFor';
 import {
   ErrorWithStack,
   prepareErrorMessage,
   createQueryByError,
 } from './errors';
-import type { WaitForOptions } from './findByAPI';
 
 function isNodeValid(node: ReactTestInstance) {
   return typeof node.type === 'string';
@@ -70,19 +70,11 @@ const makeQuery = <P: mixed, M: mixed>(
   };
 
   const findBy = (matcher: M, waitForOptions?: WaitForOptions) => {
-    return waitForElement(
-      () => getBy(matcher),
-      waitForOptions?.timeout,
-      waitForOptions?.interval
-    );
+    return waitFor(() => getBy(matcher), waitForOptions);
   };
 
   const findAllBy = (matcher: M, waitForOptions?: WaitForOptions) => {
-    return waitForElement(
-      () => getAllBy(matcher),
-      waitForOptions?.timeout,
-      waitForOptions?.interval
-    );
+    return waitFor(() => getAllBy(matcher), waitForOptions);
   };
 
   return {

src/index.js

@@ -5,7 +5,7 @@ import fireEvent from './fireEvent';
 import flushMicrotasksQueue from './flushMicrotasksQueue';
 import render from './render';
 import shallow from './shallow';
-import waitForElement from './waitForElement';
+import waitFor from './waitFor';
 import within from './within';
 
 export { act };
@@ -14,5 +14,5 @@ export { fireEvent };
 export { flushMicrotasksQueue };
 export { render };
 export { shallow };
-export { waitForElement };
+export { waitFor };
 export { within };

src/waitFor.js

@@ -1,10 +1,21 @@
 // @flow
-export default function waitForElement<T>(
+
+const DEFAULT_TIMEOUT = 4500;
+const DEFAULT_INTERVAL = 50;
+
+export type WaitForOptions = {
+  timeout?: number,
+  interval?: number,
+};
+
+export default function waitFor<T>(
   expectation: () => T,
-  timeout: number = 4500,
-  interval: number = 50
+  options?: WaitForOptions
 ): Promise<T> {
+  const timeout = options?.timeout ?? DEFAULT_TIMEOUT;
+  const interval = options?.interval ?? DEFAULT_INTERVAL;
   const startTime = Date.now();
+
   return new Promise((resolve, reject) => {
     const rejectOrRerun = (error) => {
       if (Date.now() - startTime >= timeout) {