feat: userEvent.press

src/fireEvent.ts

@@ -1,7 +1,8 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import act from './act';
-import { getHostParent, isHostElement } from './helpers/component-tree';
+import { isHostElement } from './helpers/component-tree';
 import { getHostComponentNames } from './helpers/host-component-names';
+import { isPointerEventEnabled } from './helpers/pointer-events';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
@@ -19,27 +20,6 @@ export function isTouchResponder(element: ReactTestInstance) {
   );
 }
 
-export function isPointerEventEnabled(
-  element: ReactTestInstance,
-  isParent?: boolean
-): boolean {
-  const pointerEvents = element.props.pointerEvents;
-  if (pointerEvents === 'none') {
-    return false;
-  }
-
-  if (isParent ? pointerEvents === 'box-only' : pointerEvents === 'box-none') {
-    return false;
-  }
-
-  const parent = getHostParent(element);
-  if (!parent) {
-    return true;
-  }
-
-  return isPointerEventEnabled(parent, true);
-}
-
 /**
  * List of events affected by `pointerEvents` prop.
  *

src/helpers/pointer-events.ts

@@ -0,0 +1,27 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { getHostParent } from './component-tree';
+
+/**
+ * pointerEvents controls whether the View can be the target of touch events.
+ * 'auto': The View and its children can be the target of touch events.
+ * 'none': The View is never the target of touch events.
+ * 'box-none': The View is never the target of touch events but its subviews can be
+ * 'box-only': The view can be the target of touch events but its subviews cannot be
+ * see the official react native doc https://reactnative.dev/docs/view#pointerevents */
+export const isPointerEventEnabled = (
+  element: ReactTestInstance,
+  isParent?: boolean
+): boolean => {
+  const parentCondition = isParent
+    ? element?.props.pointerEvents === 'box-only'
+    : element?.props.pointerEvents === 'box-none';
+
+  if (element?.props.pointerEvents === 'none' || parentCondition) {
+    return false;
+  }
+
+  const hostParent = getHostParent(element);
+  if (!hostParent) return true;
+
+  return isPointerEventEnabled(hostParent, true);
+};

src/test-utils/events.ts

@@ -18,3 +18,7 @@ export function createEventLogger() {
 
   return { events, logEvent };
 }
+
+export function getEventsName(events: EventEntry[]) {
+  return events.map((event) => event.name);
+}

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

@@ -6,6 +6,8 @@ export const CommonEventBuilder = {
    */
   touch: () => {
     return {
+      persist: jest.fn(),
+      currentTarget: { measure: jest.fn() },
       nativeEvent: {
         changedTouches: [],
         identifier: 0,
@@ -14,7 +16,7 @@ export const CommonEventBuilder = {
         pageX: 0,
         pageY: 0,
         target: 0,
-        timestamp: 0,
+        timestamp: Date.now(),
         touches: [],
       },
     };

src/user-event/index.ts

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

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."
+  `);
+});