@testing-library/react-native 12.2.0 → 12.2.2

package/src/__tests__/waitFor.test.tsx

@@ -1,327 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,86 +0,0 @@
-// 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

@@ -1,15 +0,0 @@
-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);
-}