@testing-library/react-native 12.1.2 → 12.1.3

package/src/__tests__/waitFor.test.tsx

@@ -0,0 +1,327 @@
+import * as React from 'react';
+import { Text, TouchableOpacity, View, Pressable } from 'react-native';
+import { fireEvent, render, waitFor, configure } from '..';
+
+class Banana extends React.Component<any> {
+  changeFresh = () => {
+    this.props.onChangeFresh();
+  };
+
+  render() {
+    return (
+      <View>
+        {this.props.fresh && <Text>Fresh</Text>}
+        <TouchableOpacity onPress={this.changeFresh}>
+          <Text>Change freshness!</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+class BananaContainer extends React.Component<{}, any> {
+  state = { fresh: false };
+
+  onChangeFresh = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    this.setState({ fresh: true });
+  };
+
+  render() {
+    return (
+      <Banana onChangeFresh={this.onChangeFresh} fresh={this.state.fresh} />
+    );
+  }
+}
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+test('waits for element until it stops throwing', async () => {
+  const { getByText, queryByText } = render(<BananaContainer />);
+
+  fireEvent.press(getByText('Change freshness!'));
+
+  expect(queryByText('Fresh')).toBeNull();
+
+  const freshBananaText = await waitFor(() => getByText('Fresh'));
+
+  expect(freshBananaText.props.children).toBe('Fresh');
+});
+
+test('waits for element until timeout is met', async () => {
+  const { getByText } = render(<BananaContainer />);
+
+  fireEvent.press(getByText('Change freshness!'));
+
+  await expect(
+    waitFor(() => getByText('Fresh'), { timeout: 100 })
+  ).rejects.toThrow();
+
+  // Async action ends after 300ms and we only waited 100ms, so we need to wait
+  // for the remaining async actions to finish
+  await waitFor(() => getByText('Fresh'));
+});
+
+test('waitFor defaults to asyncWaitTimeout config option', async () => {
+  configure({ asyncUtilTimeout: 100 });
+  const { getByText } = render(<BananaContainer />);
+
+  fireEvent.press(getByText('Change freshness!'));
+  await expect(waitFor(() => getByText('Fresh'))).rejects.toThrow();
+
+  // Async action ends after 300ms and we only waited 100ms, so we need to wait
+  // for the remaining async actions to finish
+  await waitFor(() => getByText('Fresh'), { timeout: 1000 });
+});
+
+test('waitFor timeout option takes precendence over `asyncWaitTimeout` config option', async () => {
+  configure({ asyncUtilTimeout: 2000 });
+  const { getByText } = render(<BananaContainer />);
+
+  fireEvent.press(getByText('Change freshness!'));
+  await expect(
+    waitFor(() => getByText('Fresh'), { timeout: 100 })
+  ).rejects.toThrow();
+
+  // Async action ends after 300ms and we only waited 100ms, so we need to wait
+  // for the remaining async actions to finish
+  await waitFor(() => getByText('Fresh'));
+});
+
+test('waits for element with custom interval', async () => {
+  const mockFn = jest.fn(() => {
+    throw Error('test');
+  });
+
+  try {
+    await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
+  } catch (e) {
+    // suppress
+  }
+
+  expect(mockFn).toHaveBeenCalledTimes(2);
+});
+
+// this component is convoluted on purpose. It is not a good react pattern, but it is valid
+// react code that will run differently between different react versions (17 and 18), so we need
+// explicit tests for it
+const Comp = ({ onPress }: { onPress: () => void }) => {
+  const [state, setState] = React.useState(false);
+
+  React.useEffect(() => {
+    if (state) {
+      onPress();
+    }
+  }, [state, onPress]);
+
+  return (
+    <Pressable
+      onPress={async () => {
+        await Promise.resolve();
+        setState(true);
+      }}
+    >
+      <Text>Trigger</Text>
+    </Pressable>
+  );
+};
+
+test('waits for async event with fireEvent', async () => {
+  const spy = jest.fn();
+  const { getByText } = render(<Comp onPress={spy} />);
+
+  fireEvent.press(getByText('Trigger'));
+
+  await waitFor(() => {
+    expect(spy).toHaveBeenCalled();
+  });
+});
+
+test.each([false, true])(
+  'waits for element until it stops throwing using fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
+    const { getByText, queryByText } = render(<BananaContainer />);
+
+    fireEvent.press(getByText('Change freshness!'));
+    expect(queryByText('Fresh')).toBeNull();
+
+    jest.advanceTimersByTime(300);
+    const freshBananaText = await waitFor(() => getByText('Fresh'));
+
+    expect(freshBananaText.props.children).toBe('Fresh');
+  }
+);
+
+test.each([false, true])(
+  'waits for assertion until timeout is met with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
+
+    const mockFn = jest.fn(() => {
+      throw Error('test');
+    });
+
+    try {
+      await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
+    } catch (error) {
+      // suppress
+    }
+
+    expect(mockFn).toHaveBeenCalledTimes(3);
+  }
+);
+
+test.each([false, true])(
+  'waits for assertion until timeout is met with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
+
+    const mockErrorFn = jest.fn(() => {
+      throw Error('test');
+    });
+
+    const mockHandleFn = jest.fn((e) => e);
+
+    try {
+      await waitFor(() => mockErrorFn(), {
+        timeout: 400,
+        interval: 200,
+        onTimeout: mockHandleFn,
+      });
+    } catch (error) {
+      // suppress
+    }
+
+    expect(mockErrorFn).toHaveBeenCalledTimes(3);
+    expect(mockHandleFn).toHaveBeenCalledTimes(1);
+  }
+);
+
+const blockThread = (timeToBlockThread: number, legacyFakeTimers: boolean) => {
+  jest.useRealTimers();
+  let end = Date.now() + timeToBlockThread;
+
+  while (Date.now() < end) {
+    // do nothing
+  }
+
+  jest.useFakeTimers({ legacyFakeTimers });
+};
+
+test.each([true, false])(
+  'it should not depend on real time when using fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
+    const WAIT_FOR_INTERVAL = 20;
+    const WAIT_FOR_TIMEOUT = WAIT_FOR_INTERVAL * 5;
+
+    const mockErrorFn = jest.fn(() => {
+      // Wait 2 times interval so that check time is longer than interval
+      blockThread(WAIT_FOR_INTERVAL * 2, legacyFakeTimers);
+      throw new Error('test');
+    });
+
+    await expect(
+      async () =>
+        await waitFor(mockErrorFn, {
+          timeout: WAIT_FOR_TIMEOUT,
+          interval: WAIT_FOR_INTERVAL,
+        })
+    ).rejects.toThrow();
+
+    // Verify that the `waitFor` callback has been called the expected number of times
+    // (timeout / interval + 1), so it confirms that the real duration of callback did not
+    // cause the real clock timeout when running using fake timers.
+    expect(mockErrorFn).toHaveBeenCalledTimes(
+      WAIT_FOR_TIMEOUT / WAIT_FOR_INTERVAL + 1
+    );
+  }
+);
+
+test.each([false, true])(
+  'awaiting something that succeeds before timeout works with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
+
+    let calls = 0;
+    const mockFn = jest.fn(() => {
+      calls += 1;
+      if (calls < 3) {
+        throw Error('test');
+      }
+    });
+
+    try {
+      await waitFor(() => mockFn(), { timeout: 400, interval: 200 });
+    } catch (error) {
+      // suppress
+    }
+
+    expect(mockFn).toHaveBeenCalledTimes(3);
+  }
+);
+
+test.each([
+  [false, false],
+  [true, false],
+  [true, true],
+])(
+  'flushes scheduled updates before returning (fakeTimers = %s, legacyFakeTimers = %s)',
+  async (fakeTimers, legacyFakeTimers) => {
+    if (fakeTimers) {
+      jest.useFakeTimers({ legacyFakeTimers });
+    }
+
+    function Apple({ onPress }: { onPress: (color: string) => void }) {
+      const [color, setColor] = React.useState('green');
+      const [syncedColor, setSyncedColor] = React.useState(color);
+
+      // On mount, set the color to "red" in a promise microtask
+      React.useEffect(() => {
+        // eslint-disable-next-line promise/prefer-await-to-then, promise/catch-or-return
+        Promise.resolve('red').then((c) => setColor(c));
+      }, []);
+
+      // Sync the `color` state to `syncedColor` state, but with a delay caused by the effect
+      React.useEffect(() => {
+        setSyncedColor(color);
+      }, [color]);
+
+      return (
+        <View testID="root">
+          <Text>{color}</Text>
+          <Pressable onPress={() => onPress(syncedColor)}>
+            <Text>Trigger</Text>
+          </Pressable>
+        </View>
+      );
+    }
+
+    const onPress = jest.fn();
+    const view = render(<Apple onPress={onPress} />);
+
+    // Required: this `waitFor` will succeed on first check, because the "root" view is there
+    // since the initial mount.
+    await waitFor(() => view.getByTestId('root'));
+
+    // This `waitFor` will also succeed on first check, because the promise that sets the
+    // `color` state to "red" resolves right after the previous `await waitFor` statement.
+    await waitFor(() => view.getByText('red'));
+
+    // Check that the `onPress` callback is called with the already-updated value of `syncedColor`.
+    fireEvent.press(view.getByText('Trigger'));
+    expect(onPress).toHaveBeenCalledWith('red');
+  }
+);
+
+test('waitFor throws if expectation is not a function', async () => {
+  await expect(
+    // @ts-expect-error intentionally passing non-function
+    waitFor('not a function')
+  ).rejects.toThrowErrorMatchingInlineSnapshot(
+    `"Received \`expectation\` arg must be a function"`
+  );
+});

package/src/__tests__/waitForElementToBeRemoved.test.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { render, fireEvent, waitForElementToBeRemoved } from '..';
+
+const TestSetup = ({ shouldUseDelay = true }) => {
+  const [isAdded, setIsAdded] = useState(true);
+
+  const removeElement = async () => {
+    if (shouldUseDelay) {
+      setTimeout(() => setIsAdded(false), 300);
+    } else {
+      setIsAdded(false);
+    }
+  };
+
+  return (
+    <View>
+      {isAdded && <Text>Observed Element</Text>}
+
+      <TouchableOpacity onPress={removeElement}>
+        <Text>Remove Element</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+test('waits when using getBy query', async () => {
+  const screen = render(<TestSetup />);
+
+  fireEvent.press(screen.getByText('Remove Element'));
+  const element = screen.getByText('Observed Element');
+  expect(element).toBeTruthy();
+
+  const result = await waitForElementToBeRemoved(() =>
+    screen.getByText('Observed Element')
+  );
+  expect(screen.queryByText('Observed Element')).toBeNull();
+  expect(result).toEqual(element);
+});
+
+test('waits when using getAllBy query', async () => {
+  const screen = render(<TestSetup />);
+
+  fireEvent.press(screen.getByText('Remove Element'));
+  const elements = screen.getAllByText('Observed Element');
+  expect(elements).toBeTruthy();
+
+  const result = await waitForElementToBeRemoved(() =>
+    screen.getAllByText('Observed Element')
+  );
+  expect(screen.queryByText('Observed Element')).toBeNull();
+  expect(result).toEqual(elements);
+});
+
+test('waits when using queryBy query', async () => {
+  const screen = render(<TestSetup />);
+
+  fireEvent.press(screen.getByText('Remove Element'));
+  const element = screen.getByText('Observed Element');
+  expect(element).toBeTruthy();
+
+  const result = await waitForElementToBeRemoved(() =>
+    screen.queryByText('Observed Element')
+  );
+  expect(screen.queryByText('Observed Element')).toBeNull();
+  expect(result).toEqual(element);
+});
+
+test('waits when using queryAllBy query', async () => {
+  const screen = render(<TestSetup />);
+
+  fireEvent.press(screen.getByText('Remove Element'));
+  const elements = screen.getAllByText('Observed Element');
+  expect(elements).toBeTruthy();
+
+  const result = await waitForElementToBeRemoved(() =>
+    screen.queryAllByText('Observed Element')
+  );
+  expect(screen.queryByText('Observed Element')).toBeNull();
+  expect(result).toEqual(elements);
+});
+
+test('checks if elements exist at start', async () => {
+  const screen = render(<TestSetup shouldUseDelay={false} />);
+
+  fireEvent.press(screen.getByText('Remove Element'));
+  expect(screen.queryByText('Observed Element')).toBeNull();
+
+  await expect(
+    waitForElementToBeRemoved(() => screen.queryByText('Observed Element'))
+  ).rejects.toThrow(
+    'The element(s) given to waitForElementToBeRemoved are already removed. waitForElementToBeRemoved requires that the element(s) exist(s) before waiting for removal.'
+  );
+});
+
+test('waits until timeout', async () => {
+  const screen = render(<TestSetup />);
+
+  fireEvent.press(screen.getByText('Remove Element'));
+  expect(screen.getByText('Observed Element')).toBeTruthy();
+
+  await expect(
+    waitForElementToBeRemoved(() => screen.getByText('Observed Element'), {
+      timeout: 100,
+    })
+  ).rejects.toThrow('Timed out in waitForElementToBeRemoved.');
+
+  // Async action ends after 300ms and we only waited 100ms, so we need to wait for the remaining
+  // async actions to finish
+  await waitForElementToBeRemoved(() => screen.getByText('Observed Element'));
+});
+
+test('waits with custom interval', async () => {
+  const mockFn = jest.fn(() => <View />);
+
+  try {
+    await waitForElementToBeRemoved(() => mockFn(), {
+      timeout: 600,
+      interval: 200,
+    });
+  } catch (e) {
+    // Suppress expected error
+  }
+
+  expect(mockFn).toHaveBeenCalledTimes(4);
+});
+
+test.each([false, true])(
+  'works with fake timers (legacyFakeTimers = %s)',
+  async (legacyFakeTimers) => {
+    jest.useFakeTimers({ legacyFakeTimers });
+
+    const mockFn = jest.fn(() => <View />);
+
+    try {
+      await waitForElementToBeRemoved(() => mockFn(), {
+        timeout: 400,
+        interval: 200,
+      });
+    } catch (e) {
+      // Suppress expected error
+    }
+
+    // waitForElementToBeRemoved runs an initial call of the expectation
+    expect(mockFn).toHaveBeenCalledTimes(4);
+  }
+);

package/src/__tests__/within.test.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { View, Text, TextInput } from 'react-native';
+import { render, within, getQueriesForElement } from '..';
+
+test('within() exposes basic queries', async () => {
+  const rootQueries = render(
+    <View>
+      <View accessibilityHint="first">
+        <Text>Same Text</Text>
+        <TextInput value="Same Value" placeholder="Same Placeholder" />
+      </View>
+      <View accessibilityHint="second">
+        <Text>Same Text</Text>
+        <TextInput value="Same Value" placeholder="Same Placeholder" />
+      </View>
+    </View>
+  );
+
+  expect(rootQueries.getAllByText('Same Text')).toHaveLength(2);
+  expect(rootQueries.getAllByDisplayValue('Same Value')).toHaveLength(2);
+  expect(rootQueries.getAllByPlaceholderText('Same Placeholder')).toHaveLength(
+    2
+  );
+
+  const firstQueries = within(rootQueries.getByA11yHint('first'));
+  expect(firstQueries.getAllByText('Same Text')).toHaveLength(1);
+  expect(firstQueries.getByText('Same Text')).toBeTruthy();
+  expect(firstQueries.queryAllByText('Same Text')).toHaveLength(1);
+  expect(firstQueries.queryByText('Same Text')).toBeTruthy();
+  expect(firstQueries.getByDisplayValue('Same Value')).toBeTruthy();
+  expect(firstQueries.getByPlaceholderText('Same Placeholder')).toBeTruthy();
+  await expect(
+    firstQueries.findByDisplayValue('Same Value')
+  ).resolves.toBeTruthy();
+  await expect(
+    firstQueries.findAllByPlaceholderText('Same Placeholder')
+  ).resolves.toHaveLength(1);
+
+  const secondQueries = within(rootQueries.getByA11yHint('second'));
+  expect(secondQueries.getAllByText('Same Text')).toHaveLength(1);
+  expect(secondQueries.getByText('Same Text')).toBeTruthy();
+  expect(secondQueries.queryAllByText('Same Text')).toHaveLength(1);
+  expect(secondQueries.queryByText('Same Text')).toBeTruthy();
+  expect(secondQueries.getByDisplayValue('Same Value')).toBeTruthy();
+  expect(secondQueries.getByPlaceholderText('Same Placeholder')).toBeTruthy();
+});
+
+test('within() exposes a11y queries', async () => {
+  const rootQueries = render(
+    <View>
+      <View accessibilityHint="first">
+        <TextInput
+          value="Same Value"
+          accessibilityLabel="Same Label"
+          accessibilityHint="Same Hint"
+        />
+      </View>
+      <View accessibilityHint="second">
+        <TextInput
+          value="Same Value"
+          accessibilityLabel="Same Label"
+          accessibilityHint="Same Hint"
+        />
+      </View>
+    </View>
+  );
+
+  expect(rootQueries.getAllByLabelText('Same Label')).toHaveLength(2);
+  expect(rootQueries.getAllByA11yHint('Same Hint')).toHaveLength(2);
+
+  const firstQueries = within(rootQueries.getByA11yHint('first'));
+  expect(firstQueries.getByLabelText('Same Label')).toBeTruthy();
+  expect(firstQueries.getByA11yHint('Same Hint')).toBeTruthy();
+  expect(firstQueries.queryByLabelText('Same Label')).toBeTruthy();
+  expect(firstQueries.queryByA11yHint('Same Hint')).toBeTruthy();
+  await expect(
+    firstQueries.findByLabelText('Same Label')
+  ).resolves.toBeTruthy();
+  await expect(firstQueries.findByA11yHint('Same Hint')).resolves.toBeTruthy();
+
+  const secondQueries = within(rootQueries.getByA11yHint('second'));
+  expect(secondQueries.getAllByLabelText('Same Label')).toHaveLength(1);
+  expect(secondQueries.getAllByA11yHint('Same Hint')).toHaveLength(1);
+  expect(secondQueries.queryAllByLabelText('Same Label')).toHaveLength(1);
+  expect(secondQueries.queryAllByA11yHint('Same Hint')).toHaveLength(1);
+  await expect(
+    secondQueries.findAllByLabelText('Same Label')
+  ).resolves.toHaveLength(1);
+  await expect(
+    secondQueries.findAllByA11yHint('Same Hint')
+  ).resolves.toHaveLength(1);
+});
+
+test('getQueriesForElement is alias to within', () => {
+  expect(getQueriesForElement).toBe(within);
+});

package/src/act.ts

@@ -0,0 +1,86 @@
+// This file and the act() implementation is sourced from react-testing-library
+// https://github.com/testing-library/react-testing-library/blob/c80809a956b0b9f3289c4a6fa8b5e8cc72d6ef6d/src/act-compat.js
+import { act as reactTestRendererAct } from 'react-test-renderer';
+import { checkReactVersionAtLeast } from './react-versions';
+
+type ReactAct = typeof reactTestRendererAct;
+
+// See https://github.com/reactwg/react-18/discussions/102 for more context on global.IS_REACT_ACT_ENVIRONMENT
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+
+function setIsReactActEnvironment(isReactActEnvironment: boolean | undefined) {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
+}
+
+function getIsReactActEnvironment() {
+  return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+
+function withGlobalActEnvironment(actImplementation: ReactAct) {
+  return (callback: Parameters<ReactAct>[0]) => {
+    const previousActEnvironment = getIsReactActEnvironment();
+    setIsReactActEnvironment(true);
+
+    // this code is riddled with eslint disabling comments because this doesn't use real promises but eslint thinks we do
+    try {
+      // The return value of `act` is always a thenable.
+      let callbackNeedsToBeAwaited = false;
+      const actResult = actImplementation(() => {
+        const result = callback();
+        if (
+          result !== null &&
+          typeof result === 'object' &&
+          // @ts-expect-error this should be a promise or thenable
+          // eslint-disable-next-line promise/prefer-await-to-then
+          typeof result.then === 'function'
+        ) {
+          callbackNeedsToBeAwaited = true;
+        }
+        return result;
+      });
+
+      if (callbackNeedsToBeAwaited) {
+        const thenable = actResult;
+        return {
+          then: (
+            resolve: (value: never) => never,
+            reject: (value: never) => never
+          ) => {
+            // eslint-disable-next-line
+            thenable.then(
+              // eslint-disable-next-line promise/always-return
+              (returnValue) => {
+                setIsReactActEnvironment(previousActEnvironment);
+                resolve(returnValue);
+              },
+              (error) => {
+                setIsReactActEnvironment(previousActEnvironment);
+                reject(error);
+              }
+            );
+          },
+        };
+      } else {
+        setIsReactActEnvironment(previousActEnvironment);
+        return actResult;
+      }
+    } catch (error) {
+      // Can't be a `finally {}` block since we don't know if we have to immediately restore IS_REACT_ACT_ENVIRONMENT
+      // or if we have to await the callback first.
+      setIsReactActEnvironment(previousActEnvironment);
+      throw error;
+    }
+  };
+}
+
+const act: ReactAct = checkReactVersionAtLeast(18, 0)
+  ? (withGlobalActEnvironment(reactTestRendererAct) as ReactAct)
+  : reactTestRendererAct;
+
+export default act;
+export {
+  setIsReactActEnvironment as setReactActEnvironment,
+  getIsReactActEnvironment,
+};

package/src/cleanup.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { clearRenderResult } from './screen';
+
+type CleanUpFunction = (nextElement?: React.ReactElement<any>) => void;
+let cleanupQueue = new Set<CleanUpFunction>();
+
+export default function cleanup() {
+  clearRenderResult();
+  cleanupQueue.forEach((fn) => fn());
+  cleanupQueue.clear();
+}
+
+export function addToCleanupQueue(fn: CleanUpFunction) {
+  cleanupQueue.add(fn);
+}