@testing-library/react-native 12.1.2 → 12.2.0

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,66 @@
+/**
+ * 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]]}`
+ */
+function 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: [],
+    },
+  };
+}
+
+export const CommonEventBuilder = {
+  touch,
+
+  responderGrant: () => {
+    return {
+      ...touch(),
+      dispatchConfig: { registrationName: 'onResponderGrant' },
+    };
+  },
+
+  responderRelease: () => {
+    return {
+      ...touch(),
+      dispatchConfig: { registrationName: 'onResponderRelease' },
+    };
+  },
+
+  /**
+   * 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,7 @@
+import { CommonEventBuilder } from './common';
+import { TextInputEventBuilder } from './text-input';
+
+export const EventBuilder = {
+  Common: CommonEventBuilder,
+  TextInput: TextInputEventBuilder,
+};

package/src/user-event/event-builder/text-input.ts

@@ -0,0 +1,86 @@
+import { ContentSize } from '../utils/content-size';
+import { TextRange } from '../utils/text-range';
+
+export const TextInputEventBuilder = {
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"eventCount": 6, "target": 53, "text": "Tes"}`
+   */
+  change: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0, eventCount: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 3, "key": "a", "target": 75}`
+   * - Android: `{"key": "a"}`
+   */
+  keyPress: (key: string) => {
+    return {
+      nativeEvent: { key },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"target": 53, "text": "Test"}`
+   */
+  submitEditing: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 4, "target": 75, "text": "Test"}`
+   * - Android: `{"target": 53, "text": "Test"}`
+   */
+  endEditing: (text: string) => {
+    return {
+      nativeEvent: { text, target: 0 },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"selection": {"end": 4, "start": 4}, "target": 75}`
+   * - Android: `{"selection": {"end": 4, "start": 4}}`
+   */
+  selectionChange: ({ start, end }: TextRange) => {
+    return {
+      nativeEvent: { selection: { start, end } },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"eventCount": 2, "previousText": "Te", "range": {"end": 2, "start": 2}, "target": 75, "text": "s"}`
+   * - Android: `{"previousText": "Te", "range": {"end": 2, "start": 0}, "target": 53, "text": "Tes"}`
+   */
+  textInput: (text: string, previousText: string) => {
+    return {
+      nativeEvent: {
+        text,
+        previousText,
+        range: { start: text.length, end: text.length },
+        target: 0,
+      },
+    };
+  },
+
+  /**
+   * Experimental values:
+   * - iOS: `{"contentSize": {"height": 21.666666666666668, "width": 11.666666666666666}, "target": 75}`
+   * - Android: `{"contentSize": {"height": 61.45454406738281, "width": 352.7272644042969}, "target": 53}`
+   */
+  contentSizeChange: ({ width, height }: ContentSize) => {
+    return {
+      nativeEvent: { contentSize: { width, height }, target: 0 },
+    };
+  },
+};

package/src/user-event/index.ts

@@ -0,0 +1,17 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { setup } from './setup';
+import { PressOptions } from './press';
+import { TypeOptions } from './type';
+
+export { UserEventConfig } from './setup';
+
+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, options?: TypeOptions) =>
+    setup().type(element, text, options),
+};