chore: fix Pressable implementation

Author: mdjastrzebski

src/user-event/press/__tests__/__snapshots__/press.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
     },
   },
   {
-    "name": "press",
+    "name": "pressOut",
     "payload": {
       "currentTarget": {
         "measure": [Function],
@@ -52,7 +52,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
         "pageX": 0,
         "pageY": 0,
         "target": 0,
-        "timestamp": 0,
+        "timestamp": 130,
         "touches": [],
       },
       "persist": [Function],
@@ -63,7 +63,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
     },
   },
   {
-    "name": "pressOut",
+    "name": "press",
     "payload": {
       "currentTarget": {
         "measure": [Function],
@@ -82,7 +82,7 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
         "pageX": 0,
         "pageY": 0,
         "target": 0,
-        "timestamp": 0,
+        "timestamp": 130,
         "touches": [],
       },
       "persist": [Function],

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

@@ -32,7 +32,7 @@ describe('userEvent.press with real timers', () => {
     );
     await user.press(screen.getByTestId('pressable'));
 
-    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
   });
 
   test('does not trigger event when pressable is disabled', async () => {
@@ -128,7 +128,7 @@ describe('userEvent.press with real timers', () => {
     );
     await user.press(screen.getByTestId('pressable'));
 
-    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
   });
 
   test('crawls up in the tree to find an element that responds to touch events', async () => {

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

@@ -129,7 +129,7 @@ describe('userEvent.press with fake timers', () => {
     );
     await user.press(screen.getByTestId('pressable'));
 
-    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
   });
 
   test('crawls up in the tree to find an element that responds to touch events', async () => {

src/user-event/press/constants.ts

@@ -1,13 +1,15 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import act from '../../act';
 import { getHostParent } from '../../helpers/component-tree';
 import { isTextInputEditable } from '../../helpers/text-input';
 import { isPointerEventEnabled } from '../../helpers/pointer-events';
 import { isHostText, isHostTextInput } from '../../helpers/host-component-names';
 import { EventBuilder } from '../event-builder';
 import { UserEventConfig, UserEventInstance } from '../setup';
 import { dispatchEvent, wait } from '../utils';
-import { DEFAULT_MIN_PRESS_DURATION } from './constants';
+
+// These are constants defined in the React Native repo
+export const DEFAULT_MIN_PRESS_DURATION = 130;
+export const DEFAULT_LONG_PRESS_DELAY_MS = 500;
 
 export interface PressOptions {
   duration?: number;
@@ -27,7 +29,7 @@ export async function longPress(
 ): Promise<void> {
   await basePress(this.config, element, {
     type: 'longPress',
-    duration: options?.duration ?? 500,
+    duration: options?.duration ?? DEFAULT_LONG_PRESS_DELAY_MS,
   });
 }
 
@@ -73,18 +75,14 @@ const emitPressablePressEvents = async (
 
   dispatchEvent(element, 'responderGrant', EventBuilder.Common.responderGrant());
 
-  await wait(config, options.duration);
+  // We apply minimum press duration here to ensure that `press` events are emitted after `pressOut`.
+  // Otherwise, pressables would emit them in the reverse order, which in reality happens only for
+  // very short presses (< 130ms) and contradicts the React Native docs.
+  // See: https://reactnative.dev/docs/pressable#onpress
+  let duration = Math.max(options.duration, DEFAULT_MIN_PRESS_DURATION);
+  await wait(config, duration);
 
   dispatchEvent(element, 'responderRelease', EventBuilder.Common.responderRelease());
-
-  // React Native will wait for minimal delay of DEFAULT_MIN_PRESS_DURATION
-  // before emitting the `pressOut` event. We need to wait here, so that
-  // `press()` function does not return before that.
-  if (DEFAULT_MIN_PRESS_DURATION - options.duration > 0) {
-    await act(async () => {
-      await wait(config, DEFAULT_MIN_PRESS_DURATION - options.duration);
-    });
-  }
 };
 
 const isEnabledTouchResponder = (element: ReactTestInstance) => {
@@ -127,7 +125,10 @@ async function emitTextPressEvents(
 
   dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
 
-  // Regular press events are emitted after `pressOut`.
+  // Regular press events are emitted after `pressOut` according to the React Native docs.
+  // See: https://reactnative.dev/docs/pressable#onpress
+  // Experimentally for very short presses (< 130ms) `press` events are actually emitted before `onPressOut`, but
+  // we will ignore that as in reality most pressed would be above the 130ms threshold.
   if (options.type === 'press') {
     dispatchEvent(element, 'press', EventBuilder.Common.touch());
   }