@testing-library/react-native 12.1.2 → 12.1.3

package/src/user-event/press/__tests__/press.test.tsx

@@ -0,0 +1,422 @@
+import * as React from 'react';
+import {
+  Pressable,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { createEventLogger, getEventsName } from '../../../test-utils';
+import { render, screen } from '../../..';
+import { userEvent } from '../..';
+
+describe('userEvent.press with fake timers', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(0);
+  });
+
+  test('calls onPressIn, onPress and onPressOut prop of touchable', async () => {
+    const { events, logEvent } = createEventLogger();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+        testID="pressable"
+      />
+    );
+    await user.press(screen.getByTestId('pressable'));
+
+    expect(events).toMatchInlineSnapshot(`
+      [
+        {
+          "name": "pressIn",
+          "payload": {
+            "currentTarget": {
+              "measure": [MockFunction] {
+                "calls": [
+                  [
+                    [Function],
+                  ],
+                  [
+                    [Function],
+                  ],
+                ],
+                "results": [
+                  {
+                    "type": "return",
+                    "value": undefined,
+                  },
+                  {
+                    "type": "return",
+                    "value": undefined,
+                  },
+                ],
+              },
+            },
+            "dispatchConfig": {
+              "registrationName": "onResponderGrant",
+            },
+            "nativeEvent": {
+              "changedTouches": [],
+              "identifier": 0,
+              "locationX": 0,
+              "locationY": 0,
+              "pageX": 0,
+              "pageY": 0,
+              "target": 0,
+              "timestamp": 0,
+              "touches": [],
+            },
+            "persist": [MockFunction] {
+              "calls": [
+                [],
+              ],
+              "results": [
+                {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
+          },
+        },
+        {
+          "name": "press",
+          "payload": {
+            "currentTarget": {
+              "measure": [MockFunction],
+            },
+            "dispatchConfig": {
+              "registrationName": "onResponderRelease",
+            },
+            "nativeEvent": {
+              "changedTouches": [],
+              "identifier": 0,
+              "locationX": 0,
+              "locationY": 0,
+              "pageX": 0,
+              "pageY": 0,
+              "target": 0,
+              "timestamp": 0,
+              "touches": [],
+            },
+            "persist": [MockFunction] {
+              "calls": [
+                [],
+              ],
+              "results": [
+                {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
+          },
+        },
+        {
+          "name": "pressOut",
+          "payload": {
+            "currentTarget": {
+              "measure": [MockFunction],
+            },
+            "dispatchConfig": {
+              "registrationName": "onResponderRelease",
+            },
+            "nativeEvent": {
+              "changedTouches": [],
+              "identifier": 0,
+              "locationX": 0,
+              "locationY": 0,
+              "pageX": 0,
+              "pageY": 0,
+              "target": 0,
+              "timestamp": 0,
+              "touches": [],
+            },
+            "persist": [MockFunction] {
+              "calls": [
+                [],
+              ],
+              "results": [
+                {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
+          },
+        },
+      ]
+    `);
+  });
+
+  test('does not trigger event when pressable is disabled', async () => {
+    const { events, logEvent } = createEventLogger();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        disabled
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+        testID="pressable"
+      />
+    );
+    await user.press(screen.getByTestId('pressable'));
+
+    expect(events).toEqual([]);
+  });
+
+  test('does not call press when pointer events is none', async () => {
+    const { events, logEvent } = createEventLogger();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+        testID="pressable"
+        pointerEvents="none"
+      />
+    );
+    await user.press(screen.getByTestId('pressable'));
+
+    expect(events).toEqual([]);
+  });
+
+  test('does not call press when pointer events is box-none', async () => {
+    const { events, logEvent } = createEventLogger();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+        testID="pressable"
+        pointerEvents="box-none"
+      />
+    );
+    await user.press(screen.getByTestId('pressable'));
+
+    expect(events).toEqual([]);
+  });
+
+  test('does not call press when parent has pointer events box-only', async () => {
+    const { events, logEvent } = createEventLogger();
+    const user = userEvent.setup();
+
+    render(
+      <View pointerEvents="box-only">
+        <Pressable
+          onPress={logEvent('press')}
+          onPressIn={logEvent('pressIn')}
+          onPressOut={logEvent('pressOut')}
+          onLongPress={logEvent('longPress')}
+          testID="pressable"
+        />
+      </View>
+    );
+    await user.press(screen.getByTestId('pressable'));
+
+    expect(events).toEqual([]);
+  });
+
+  test('calls press when pressable has pointer events box-only', async () => {
+    const { events, logEvent } = createEventLogger();
+    const user = userEvent.setup();
+
+    render(
+      <Pressable
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+        testID="pressable"
+        pointerEvents="box-only"
+      />
+    );
+    await user.press(screen.getByTestId('pressable'));
+
+    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+  });
+
+  test('crawls up in the tree to find an element that responds to touch events', async () => {
+    const mockOnPress = jest.fn();
+
+    render(
+      <Pressable onPress={mockOnPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+
+  test('does not call onLongPress', async () => {
+    const mockOnLongPress = jest.fn();
+
+    render(
+      <Pressable onLongPress={mockOnLongPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(mockOnLongPress).not.toHaveBeenCalled();
+  });
+
+  test('works on TouchableOpacity', async () => {
+    const mockOnPress = jest.fn();
+
+    render(
+      <TouchableOpacity onPress={mockOnPress}>
+        <Text>press me</Text>
+      </TouchableOpacity>
+    );
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+
+  test('works on TouchableHighlight', async () => {
+    const mockOnPress = jest.fn();
+
+    render(
+      <TouchableHighlight onPress={mockOnPress}>
+        <Text>press me</Text>
+      </TouchableHighlight>
+    );
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+
+  test('works on Text', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <Text
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+      >
+        press me
+      </Text>
+    );
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(getEventsName(events)).toEqual(['pressIn', 'press', 'pressOut']);
+  });
+
+  test('doesnt trigger on disabled Text', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <Text
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+        disabled
+      >
+        press me
+      </Text>
+    );
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(events).toEqual([]);
+  });
+
+  test('doesnt trigger on Text with disabled pointer events', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <View pointerEvents="box-only">
+        <Text
+          onPress={logEvent('press')}
+          onPressIn={logEvent('pressIn')}
+          onPressOut={logEvent('pressOut')}
+          onLongPress={logEvent('longPress')}
+        >
+          press me
+        </Text>
+      </View>
+    );
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(events).toEqual([]);
+  });
+
+  test('works on TetInput', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <TextInput
+        placeholder="email"
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+      />
+    );
+    await userEvent.press(screen.getByPlaceholderText('email'));
+
+    expect(getEventsName(events)).toEqual(['pressIn', 'pressOut']);
+  });
+
+  test('does not call onPressIn and onPressOut on non editable TetInput', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <TextInput
+        placeholder="email"
+        editable={false}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+      />
+    );
+    await userEvent.press(screen.getByPlaceholderText('email'));
+    expect(events).toEqual([]);
+  });
+
+  test('does not call onPressIn and onPressOut on TetInput with pointer events disabled', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <TextInput
+        placeholder="email"
+        pointerEvents="box-none"
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+      />
+    );
+    await userEvent.press(screen.getByPlaceholderText('email'));
+    expect(events).toEqual([]);
+  });
+
+  test('press is accessible directly in userEvent', async () => {
+    const mockOnPress = jest.fn();
+
+    render(
+      <Pressable onPress={mockOnPress}>
+        <Text>press me</Text>
+      </Pressable>
+    );
+
+    await userEvent.press(screen.getByText('press me'));
+
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+});

package/src/user-event/press/constants.ts

@@ -0,0 +1,7 @@
+// These are constants defined in the React Native repo
+
+// Used to define the delay before calling onPressOut after a press
+export const DEFAULT_MIN_PRESS_DURATION = 130;
+
+// Default minimum press duration to trigger a long press
+export const DEFAULT_LONG_PRESS_DELAY_MS = 500;

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

@@ -0,0 +1 @@
+export { press, longPress } from './press';

package/src/user-event/press/press.ts

@@ -0,0 +1,134 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { EventBuilder } from '../event-builder';
+import { UserEventInstance } from '../setup';
+import { wait } from '../utils';
+import act from '../../act';
+import { getHostParent } from '../../helpers/component-tree';
+import { filterNodeByType } from '../../helpers/filterNodeByType';
+import { isPointerEventEnabled } from '../../helpers/pointer-events';
+import { getHostComponentNames } from '../../helpers/host-component-names';
+import { jestFakeTimersAreEnabled } from '../../helpers/timers';
+import { DEFAULT_MIN_PRESS_DURATION } from './constants';
+import { warnAboutRealTimers } from './utils/warnAboutRealTimers';
+
+export type PressOptions = {
+  duration: number;
+};
+
+export async function press(
+  this: UserEventInstance,
+  element: ReactTestInstance
+): Promise<void> {
+  await basePress(this.config, element);
+}
+
+export async function longPress(
+  this: UserEventInstance,
+  element: ReactTestInstance,
+  options: PressOptions = { duration: 500 }
+): Promise<void> {
+  await basePress(this.config, element, options);
+}
+
+const basePress = async (
+  config: UserEventInstance['config'],
+  element: ReactTestInstance,
+  options: PressOptions = { duration: 0 }
+): Promise<void> => {
+  // Text and TextInput components are mocked in React Native preset so the mock
+  // doesn't implement the pressability class
+  // Thus we need to call the props directly on the host component
+  if (isEnabledHostText(element) || isEnabledTextInput(element)) {
+    await triggerMockPressEvent(config, element, options);
+    return;
+  }
+
+  if (isEnabledTouchResponder(element)) {
+    await triggerPressEvent(config, element, options);
+    return;
+  }
+
+  const hostParentElement = getHostParent(element);
+  if (!hostParentElement) {
+    return;
+  }
+
+  await basePress(config, hostParentElement, options);
+};
+
+const triggerPressEvent = async (
+  config: UserEventInstance['config'],
+  element: ReactTestInstance,
+  options: PressOptions = { duration: 0 }
+) => {
+  const areFakeTimersEnabled = jestFakeTimersAreEnabled();
+  if (!areFakeTimersEnabled) {
+    warnAboutRealTimers();
+  }
+
+  await wait(config);
+
+  await act(async () => {
+    element.props.onResponderGrant({
+      ...EventBuilder.Common.touch(),
+      dispatchConfig: { registrationName: 'onResponderGrant' },
+    });
+
+    await wait(config, options.duration);
+
+    element.props.onResponderRelease({
+      ...EventBuilder.Common.touch(),
+      dispatchConfig: { registrationName: 'onResponderRelease' },
+    });
+
+    if (DEFAULT_MIN_PRESS_DURATION - options.duration > 0) {
+      await wait(config, DEFAULT_MIN_PRESS_DURATION - options.duration);
+    }
+  });
+};
+
+const isEnabledTouchResponder = (element: ReactTestInstance) => {
+  return (
+    isPointerEventEnabled(element) &&
+    element.props.onStartShouldSetResponder?.()
+  );
+};
+
+const isEnabledHostText = (element: ReactTestInstance) => {
+  return (
+    filterNodeByType(element, getHostComponentNames().text) &&
+    isPointerEventEnabled(element) &&
+    !element.props.disabled &&
+    element.props.onPress
+  );
+};
+
+const isEnabledTextInput = (element: ReactTestInstance) => {
+  return (
+    filterNodeByType(element, getHostComponentNames().textInput) &&
+    isPointerEventEnabled(element) &&
+    element.props.editable !== false
+  );
+};
+
+const triggerMockPressEvent = async (
+  config: UserEventInstance['config'],
+  element: ReactTestInstance,
+  options: PressOptions = { duration: 0 }
+) => {
+  const { onPressIn, onPress, onPressOut } = element.props;
+  await wait(config);
+  if (onPressIn) {
+    onPressIn(EventBuilder.Common.touch());
+  }
+  if (onPress) {
+    onPress(EventBuilder.Common.touch());
+  }
+  await wait(config, options.duration);
+  if (onPressOut) {
+    if (DEFAULT_MIN_PRESS_DURATION - options.duration > 0) {
+      await wait(config, DEFAULT_MIN_PRESS_DURATION - options.duration);
+    }
+    onPressOut(EventBuilder.Common.touch());
+  }
+};

package/src/user-event/press/utils/warnAboutRealTimers.ts

@@ -0,0 +1,6 @@
+export const warnAboutRealTimers = () => {
+  // eslint-disable-next-line no-console
+  console.warn(`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.`);
+};

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

@@ -0,0 +1,2 @@
+export type { UserEventConfig, UserEventInstance } from './setup';
+export { setup } from './setup';

package/src/user-event/setup/setup.ts

@@ -0,0 +1,93 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { jestFakeTimersAreEnabled } from '../../helpers/timers';
+import { press, longPress } from '../press';
+import { type } from '../type';
+import { PressOptions } from '../press/press';
+
+export interface UserEventSetupOptions {
+  /**
+   * Between some subsequent inputs like typing a series of characters
+   * the code execution is delayed per `setTimeout` for (at least) `delay` seconds.
+   * This moves the next changes at least to next macro task
+   * and allows other (asynchronous) code to run between events.
+   *
+   * `null` prevents `setTimeout` from being called.
+   *
+   * @default 0
+   */
+  delay?: number;
+
+  /**
+   * Function to be called to advance fake timers. Setting it is necessary for
+   * fake timers to work.
+   *
+   * @example jest.advanceTimersByTime
+   */
+  advanceTimers?: (delay: number) => Promise<void> | void;
+}
+
+/**
+ * This functions allow wait to work correctly under both real and fake Jest timers.
+ */
+function universalJestAdvanceTimersBy(ms: number) {
+  if (jestFakeTimersAreEnabled()) {
+    return jest.advanceTimersByTime(ms);
+  } else {
+    return Promise.resolve();
+  }
+}
+
+const defaultOptions: Required<UserEventSetupOptions> = {
+  delay: 0,
+  advanceTimers: universalJestAdvanceTimersBy,
+};
+
+/**
+ * Creates a new instance of user event instance with the given options.
+ *
+ * @param options
+ * @returns
+ */
+export function setup(options?: UserEventSetupOptions) {
+  const config = createConfig(options);
+  const instance = createInstance(config);
+  return instance;
+}
+
+export interface UserEventConfig {
+  delay: number;
+  advanceTimers: (delay: number) => Promise<void> | void;
+}
+
+function createConfig(options?: UserEventSetupOptions): UserEventConfig {
+  return {
+    ...defaultOptions,
+    ...options,
+  };
+}
+
+export interface UserEventInstance {
+  config: UserEventConfig;
+  press: (element: ReactTestInstance) => Promise<void>;
+  longPress: (
+    element: ReactTestInstance,
+    options?: PressOptions
+  ) => Promise<void>;
+  type: (element: ReactTestInstance, text: string) => Promise<void>;
+}
+
+function createInstance(config: UserEventConfig): UserEventInstance {
+  const instance = {
+    config,
+  } as UserEventInstance;
+
+  // We need to bind these functions, as they access the config through 'this.config'.
+  const api = {
+    press: press.bind(instance),
+    longPress: longPress.bind(instance),
+    type: type.bind(instance),
+  };
+
+  Object.assign(instance, api);
+  return instance;
+}

package/src/user-event/type/__tests__/__snapshots__/type.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`user.type() dispatches required events 1`] = `
+[
+  {
+    "name": "focus",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+  {
+    "name": "changeText",
+    "payload": "Hello World!",
+  },
+  {
+    "name": "blur",
+    "payload": {
+      "nativeEvent": {
+        "target": 0,
+      },
+    },
+  },
+]
+`;