@testing-library/react-native 12.1.2 → 12.1.3

package/src/render.tsx

@@ -0,0 +1,183 @@
+import type { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+import * as React from 'react';
+import { Profiler } from 'react';
+import act from './act';
+import { addToCleanupQueue } from './cleanup';
+import { getConfig } from './config';
+import { getHostChildren } from './helpers/component-tree';
+import debugDeep, { DebugOptions } from './helpers/debugDeep';
+import debugShallow from './helpers/debugShallow';
+import { configureHostComponentNamesIfNeeded } from './helpers/host-component-names';
+import { validateStringsRenderedWithinText } from './helpers/stringValidation';
+import { renderWithAct } from './render-act';
+import { setRenderResult, screen } from './screen';
+import { getQueriesForElement } from './within';
+
+export interface RenderOptions {
+  wrapper?: React.ComponentType<any>;
+  createNodeMock?: (element: React.ReactElement) => any;
+  unstable_validateStringsRenderedWithinText?: boolean;
+}
+
+export type RenderResult = ReturnType<typeof render>;
+
+/**
+ * Renders test component deeply using React Test Renderer and exposes helpers
+ * to assert on the output.
+ */
+export default function render<T>(
+  component: React.ReactElement<T>,
+  options: RenderOptions = {}
+) {
+  return renderInternal(component, options);
+}
+
+export interface RenderInternalOptions extends RenderOptions {
+  detectHostComponentNames?: boolean;
+}
+
+export function renderInternal<T>(
+  component: React.ReactElement<T>,
+  {
+    wrapper: Wrapper,
+    createNodeMock,
+    unstable_validateStringsRenderedWithinText,
+    detectHostComponentNames = true,
+  }: RenderInternalOptions = {}
+) {
+  if (detectHostComponentNames) {
+    configureHostComponentNamesIfNeeded();
+  }
+
+  if (unstable_validateStringsRenderedWithinText) {
+    return renderWithStringValidation(component, {
+      wrapper: Wrapper,
+      createNodeMock,
+    });
+  }
+
+  const wrap = (element: React.ReactElement) =>
+    Wrapper ? <Wrapper>{element}</Wrapper> : element;
+
+  const renderer = renderWithAct(
+    wrap(component),
+    createNodeMock ? { createNodeMock } : undefined
+  );
+
+  return buildRenderResult(renderer, wrap);
+}
+
+function renderWithStringValidation<T>(
+  component: React.ReactElement<T>,
+  {
+    wrapper: Wrapper,
+    createNodeMock,
+  }: Omit<RenderOptions, 'unstable_validateStringsRenderedWithinText'> = {}
+) {
+  const handleRender: React.ProfilerProps['onRender'] = (_, phase) => {
+    if (phase === 'update') {
+      validateStringsRenderedWithinText(screen.toJSON());
+    }
+  };
+
+  const wrap = (element: React.ReactElement) => (
+    <Profiler id="renderProfiler" onRender={handleRender}>
+      {Wrapper ? <Wrapper>{element}</Wrapper> : element}
+    </Profiler>
+  );
+
+  const renderer = renderWithAct(
+    wrap(component),
+    createNodeMock ? { createNodeMock } : undefined
+  );
+  validateStringsRenderedWithinText(renderer.toJSON());
+
+  return buildRenderResult(renderer, wrap);
+}
+
+function buildRenderResult(
+  renderer: ReactTestRenderer,
+  wrap: (element: React.ReactElement) => JSX.Element
+) {
+  const update = updateWithAct(renderer, wrap);
+  const instance = renderer.root;
+
+  const unmount = () => {
+    act(() => {
+      renderer.unmount();
+    });
+  };
+
+  addToCleanupQueue(unmount);
+
+  const result = {
+    ...getQueriesForElement(instance),
+    update,
+    unmount,
+    rerender: update, // alias for `update`
+    toJSON: renderer.toJSON,
+    debug: debug(instance, renderer),
+    get root() {
+      return getHostChildren(instance)[0];
+    },
+    UNSAFE_root: instance,
+  };
+
+  // Add as non-enumerable property, so that it's safe to enumerate
+  // `render` result, e.g. using destructuring rest syntax.
+  Object.defineProperty(result, 'container', {
+    enumerable: false,
+    get() {
+      throw new Error(
+        "'container' property has been renamed to 'UNSAFE_root'.\n\n" +
+          "Consider using 'root' property which returns root host element."
+      );
+    },
+  });
+
+  setRenderResult(result);
+  return result;
+}
+
+function updateWithAct(
+  renderer: ReactTestRenderer,
+  wrap: (innerElement: React.ReactElement) => React.ReactElement
+) {
+  return function (component: React.ReactElement) {
+    act(() => {
+      renderer.update(wrap(component));
+    });
+  };
+}
+
+export interface DebugFunction {
+  (options?: DebugOptions | string): void;
+  shallow: (message?: string) => void;
+}
+
+function debug(
+  instance: ReactTestInstance,
+  renderer: ReactTestRenderer
+): DebugFunction {
+  function debugImpl(options?: DebugOptions | string) {
+    const { defaultDebugOptions } = getConfig();
+    const debugOptions =
+      typeof options === 'string'
+        ? { ...defaultDebugOptions, message: options }
+        : { ...defaultDebugOptions, ...options };
+
+    if (typeof options === 'string') {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Using debug("message") is deprecated and will be removed in future release, please use debug({ message; "message" }) instead.'
+      );
+    }
+
+    const json = renderer.toJSON();
+    if (json) {
+      return debugDeep(json, debugOptions);
+    }
+  }
+  debugImpl.shallow = (message?: string) => debugShallow(instance, message);
+  return debugImpl;
+}

package/src/renderHook.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { ComponentType } from 'react';
+import { renderInternal } from './render';
+
+export type RenderHookResult<Result, Props> = {
+  rerender: (props: Props) => void;
+  result: { current: Result };
+  unmount: () => void;
+};
+
+export type RenderHookOptions<Props> = {
+  initialProps?: Props;
+  wrapper?: ComponentType<any>;
+};
+
+export function renderHook<Result, Props>(
+  renderCallback: (props: Props) => Result,
+  options?: RenderHookOptions<Props>
+): RenderHookResult<Result, Props> {
+  const initialProps = options?.initialProps;
+  const wrapper = options?.wrapper;
+
+  const result: React.MutableRefObject<Result | null> = React.createRef();
+
+  function TestComponent({
+    renderCallbackProps,
+  }: {
+    renderCallbackProps: Props;
+  }) {
+    const renderResult = renderCallback(renderCallbackProps);
+
+    React.useEffect(() => {
+      result.current = renderResult;
+    });
+
+    return null;
+  }
+
+  const { rerender: baseRerender, unmount } = renderInternal(
+    // @ts-expect-error since option can be undefined, initialProps can be undefined when it should'nt
+    <TestComponent renderCallbackProps={initialProps} />,
+    {
+      wrapper,
+      detectHostComponentNames: false,
+    }
+  );
+
+  function rerender(rerenderCallbackProps: Props) {
+    return baseRerender(
+      <TestComponent renderCallbackProps={rerenderCallbackProps} />
+    );
+  }
+
+  // @ts-expect-error result is ill typed because ref is initialized to null
+  return { result, rerender, unmount };
+}

package/src/screen.ts

@@ -0,0 +1,123 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { RenderResult } from './render';
+
+const SCREEN_ERROR = '`render` method has not been called';
+
+const notImplemented = () => {
+  throw new Error(SCREEN_ERROR);
+};
+
+const notImplementedDebug = () => {
+  throw new Error(SCREEN_ERROR);
+};
+notImplementedDebug.shallow = notImplemented;
+
+const defaultScreen: RenderResult = {
+  get root(): ReactTestInstance {
+    throw new Error(SCREEN_ERROR);
+  },
+  get UNSAFE_root(): ReactTestInstance {
+    throw new Error(SCREEN_ERROR);
+  },
+  debug: notImplementedDebug,
+  update: notImplemented,
+  unmount: notImplemented,
+  rerender: notImplemented,
+  toJSON: notImplemented,
+  getByLabelText: notImplemented,
+  getAllByLabelText: notImplemented,
+  queryByLabelText: notImplemented,
+  queryAllByLabelText: notImplemented,
+  findByLabelText: notImplemented,
+  findAllByLabelText: notImplemented,
+  getByHintText: notImplemented,
+  getAllByHintText: notImplemented,
+  queryByHintText: notImplemented,
+  queryAllByHintText: notImplemented,
+  findByHintText: notImplemented,
+  findAllByHintText: notImplemented,
+  getByA11yHint: notImplemented,
+  getAllByA11yHint: notImplemented,
+  queryByA11yHint: notImplemented,
+  queryAllByA11yHint: notImplemented,
+  findByA11yHint: notImplemented,
+  findAllByA11yHint: notImplemented,
+  getByAccessibilityHint: notImplemented,
+  getAllByAccessibilityHint: notImplemented,
+  queryByAccessibilityHint: notImplemented,
+  queryAllByAccessibilityHint: notImplemented,
+  findByAccessibilityHint: notImplemented,
+  findAllByAccessibilityHint: notImplemented,
+  getByRole: notImplemented,
+  getAllByRole: notImplemented,
+  queryByRole: notImplemented,
+  queryAllByRole: notImplemented,
+  findByRole: notImplemented,
+  findAllByRole: notImplemented,
+  getByA11yState: notImplemented,
+  getAllByA11yState: notImplemented,
+  queryByA11yState: notImplemented,
+  queryAllByA11yState: notImplemented,
+  findByA11yState: notImplemented,
+  findAllByA11yState: notImplemented,
+  getByAccessibilityState: notImplemented,
+  getAllByAccessibilityState: notImplemented,
+  queryByAccessibilityState: notImplemented,
+  queryAllByAccessibilityState: notImplemented,
+  findByAccessibilityState: notImplemented,
+  findAllByAccessibilityState: notImplemented,
+  getByA11yValue: notImplemented,
+  getAllByA11yValue: notImplemented,
+  queryByA11yValue: notImplemented,
+  queryAllByA11yValue: notImplemented,
+  findByA11yValue: notImplemented,
+  findAllByA11yValue: notImplemented,
+  getByAccessibilityValue: notImplemented,
+  getAllByAccessibilityValue: notImplemented,
+  queryByAccessibilityValue: notImplemented,
+  queryAllByAccessibilityValue: notImplemented,
+  findByAccessibilityValue: notImplemented,
+  findAllByAccessibilityValue: notImplemented,
+  UNSAFE_getByProps: notImplemented,
+  UNSAFE_getAllByProps: notImplemented,
+  UNSAFE_queryByProps: notImplemented,
+  UNSAFE_queryAllByProps: notImplemented,
+  UNSAFE_getByType: notImplemented,
+  UNSAFE_getAllByType: notImplemented,
+  UNSAFE_queryByType: notImplemented,
+  UNSAFE_queryAllByType: notImplemented,
+  getByPlaceholderText: notImplemented,
+  getAllByPlaceholderText: notImplemented,
+  queryByPlaceholderText: notImplemented,
+  queryAllByPlaceholderText: notImplemented,
+  findByPlaceholderText: notImplemented,
+  findAllByPlaceholderText: notImplemented,
+  getByDisplayValue: notImplemented,
+  getAllByDisplayValue: notImplemented,
+  queryByDisplayValue: notImplemented,
+  queryAllByDisplayValue: notImplemented,
+  findByDisplayValue: notImplemented,
+  findAllByDisplayValue: notImplemented,
+  getByTestId: notImplemented,
+  getAllByTestId: notImplemented,
+  queryByTestId: notImplemented,
+  queryAllByTestId: notImplemented,
+  findByTestId: notImplemented,
+  findAllByTestId: notImplemented,
+  getByText: notImplemented,
+  getAllByText: notImplemented,
+  queryByText: notImplemented,
+  queryAllByText: notImplemented,
+  findByText: notImplemented,
+  findAllByText: notImplemented,
+};
+
+export let screen: RenderResult = defaultScreen;
+
+export function setRenderResult(output: RenderResult) {
+  screen = output;
+}
+
+export function clearRenderResult() {
+  screen = defaultScreen;
+}

package/src/shallow.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ReactTestInstance } from 'react-test-renderer';
+import ShallowRenderer from 'react-test-renderer/shallow'; // eslint-disable-line import/no-extraneous-dependencies
+
+/**
+ * Renders test component shallowly using react-test-renderer/shallow
+ */
+export function shallowInternal(
+  instance: ReactTestInstance | React.ReactElement<any>
+): { output: any } {
+  const renderer = new (ShallowRenderer as any)();
+
+  renderer.render(React.createElement(instance.type, instance.props));
+
+  return {
+    output: renderer.getRenderOutput(),
+  };
+}

package/src/test-utils/events.ts

@@ -0,0 +1,24 @@
+interface EventEntry {
+  name: string;
+  payload: any;
+}
+
+export function createEventLogger() {
+  const events: EventEntry[] = [];
+  const logEvent = (name: string) => {
+    return (event: unknown) => {
+      const eventEntry: EventEntry = {
+        name,
+        payload: event,
+      };
+
+      events.push(eventEntry);
+    };
+  };
+
+  return { events, logEvent };
+}
+
+export function getEventsName(events: EventEntry[]) {
+  return events.map((event) => event.name);
+}

package/src/test-utils/index.ts

@@ -0,0 +1 @@
+export * from './events';

package/src/user-event/event-builder/common.ts

@@ -0,0 +1,50 @@
+export const CommonEventBuilder = {
+  /**
+   * Experimental values:
+   * - iOS: `{"changedTouches": [[Circular]], "identifier": 1, "locationX": 253, "locationY": 30.333328247070312, "pageX": 273, "pageY": 141.3333282470703, "target": 75, "timestamp": 875928682.0450834, "touches": [[Circular]]}`
+   * - Android: `{"changedTouches": [[Circular]], "identifier": 0, "locationX": 160, "locationY": 40.3636360168457, "pageX": 180, "pageY": 140.36363220214844, "target": 53, "targetSurface": -1, "timestamp": 10290805, "touches": [[Circular]]}`
+   */
+  touch: () => {
+    return {
+      persist: jest.fn(),
+      currentTarget: { measure: jest.fn() },
+      nativeEvent: {
+        changedTouches: [],
+        identifier: 0,
+        locationX: 0,
+        locationY: 0,
+        pageX: 0,
+        pageY: 0,
+        target: 0,
+        timestamp: Date.now(),
+        touches: [],
+      },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 0, "target": 75, "text": ""}`
+   * - Android: `{"target": 53}`
+   */
+  focus: () => {
+    return {
+      nativeEvent: {
+        target: 0,
+      },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 0, "target": 75, "text": ""}`
+   * - Android: `{"target": 53}`
+   */
+  blur: () => {
+    return {
+      nativeEvent: {
+        target: 0,
+      },
+    };
+  },
+};

package/src/user-event/event-builder/index.ts

@@ -0,0 +1,5 @@
+import { CommonEventBuilder } from './common';
+
+export const EventBuilder = {
+  Common: CommonEventBuilder,
+};

package/src/user-event/index.ts

@@ -0,0 +1,14 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { setup } from './setup';
+import { PressOptions } from './press/press';
+
+export const userEvent = {
+  setup,
+
+  // Direct access for User Event v13 compatibility
+  press: (element: ReactTestInstance) => setup().press(element),
+  longPress: (element: ReactTestInstance, options?: PressOptions) =>
+    setup().longPress(element, options),
+  type: (element: ReactTestInstance, text: string) =>
+    setup().type(element, text),
+};

package/src/user-event/press/__tests__/longPress.real-timers.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { render, screen } from '../../../pure';
+import { userEvent } from '../..';
+import * as WarnAboutRealTimers from '../utils/warnAboutRealTimers';
+
+describe('userEvent.longPress with real timers', () => {
+  beforeEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+    jest.spyOn(WarnAboutRealTimers, 'warnAboutRealTimers').mockImplementation();
+  });
+
+  test('calls onLongPress if the delayLongPress is the default one', async () => {
+    const mockOnLongPress = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable onLongPress={mockOnLongPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await user.longPress(screen.getByText('press me'));
+
+    expect(mockOnLongPress).toHaveBeenCalled();
+  });
+
+  test('calls onLongPress when duration is greater than specified delayLongPress', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnPress = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        delayLongPress={800}
+        onLongPress={mockOnLongPress}
+        onPress={mockOnPress}
+      >
+        <Text>press me</Text>
+      </Pressable>
+    );
+
+    await user.longPress(screen.getByText('press me'), {
+      duration: 1000,
+    });
+
+    expect(mockOnLongPress).toHaveBeenCalled();
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  test('does not calls onLongPress when duration is lesser than specified delayLongPress', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnPress = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        delayLongPress={1000}
+        onLongPress={mockOnLongPress}
+        onPress={mockOnPress}
+      >
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await user.longPress(screen.getByText('press me'));
+
+    expect(mockOnLongPress).not.toHaveBeenCalled();
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not calls onPress when onLongPress is called', async () => {
+    const mockOnLongPress = jest.fn();
+    const mockOnPress = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable onLongPress={mockOnLongPress} onPress={mockOnPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await user.longPress(screen.getByText('press me'));
+
+    expect(mockOnLongPress).toHaveBeenCalled();
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  test('longPress is accessible directly in userEvent', async () => {
+    const mockOnLongPress = jest.fn();
+
+    render(
+      <Pressable onLongPress={mockOnLongPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+
+    await userEvent.longPress(screen.getByText('press me'));
+
+    expect(mockOnLongPress).toHaveBeenCalled();
+  });
+});
+
+test('warns about using real timers with userEvent', async () => {
+  jest.restoreAllMocks();
+  const mockConsoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<Pressable testID="pressable" />);
+
+  await userEvent.longPress(screen.getByTestId('pressable'));
+
+  expect(mockConsoleWarn.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "It is recommended to use userEvent with fake timers
+    Some events involve duration so your tests may take a long time to run.
+    For instance calling userEvent.longPress with real timers will take 500 ms."
+  `);
+});