fix: press event order (#1696)

experiments-app/src/experiments.ts

@@ -1,4 +1,5 @@
 import { AccessibilityScreen } from './screens/Accessibility';
+import { PressEvents } from './screens/PressEvents';
 import { TextInputEventPropagation } from './screens/TextInputEventPropagation';
 import { TextInputEvents } from './screens/TextInputEvents';
 import { ScrollViewEvents } from './screens/ScrollViewEvents';
@@ -13,6 +14,11 @@ export const experiments = [
     title: 'Accessibility',
     component: AccessibilityScreen,
   },
+  {
+    key: 'PressEvents',
+    title: 'Press Events',
+    component: PressEvents,
+  },
   {
     key: 'TextInputEvents',
     title: 'TextInput Events',

experiments-app/src/screens/PressEvents.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  SafeAreaView,
+  Text,
+  TextInput,
+  View,
+  Pressable,
+  TouchableOpacity,
+} from 'react-native';
+import { nativeEventLogger, logEvent } from '../utils/helpers';
+
+export function PressEvents() {
+  const [value, setValue] = React.useState('');
+
+  const handleChangeText = (value: string) => {
+    setValue(value);
+    logEvent('changeText', value);
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.wrapper}>
+        <TextInput
+          style={styles.textInput}
+          value={value}
+          onPress={nativeEventLogger('press')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        />
+      </View>
+      <View style={styles.wrapper}>
+        <Text
+          onPress={nativeEventLogger('press')}
+          onLongPress={nativeEventLogger('longPress')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        >
+          Text
+        </Text>
+      </View>
+      <View style={styles.wrapper}>
+        <Pressable
+          onPress={nativeEventLogger('press')}
+          onLongPress={nativeEventLogger('longPress')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        >
+          <Text>Pressable</Text>
+        </Pressable>
+      </View>
+      <View style={styles.wrapper}>
+        <TouchableOpacity
+          onPress={nativeEventLogger('press')}
+          onLongPress={nativeEventLogger('longPress')}
+          onPressIn={nativeEventLogger('pressIn')}
+          onPressOut={nativeEventLogger('pressOut')}
+        >
+          <Text>Pressable</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  wrapper: {
+    padding: 20,
+    backgroundColor: 'yellow',
+  },
+  textInput: {
+    backgroundColor: 'white',
+    margin: 20,
+    padding: 8,
+    fontSize: 18,
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+});

experiments-app/src/utils/helpers.ts

@@ -1,5 +1,7 @@
 import { NativeSyntheticEvent } from 'react-native/types';
 
+let lastEventTimeStamp: number | null = null;
+
 export function nativeEventLogger(name: string) {
   return (event: NativeSyntheticEvent<unknown>) => {
     logEvent(name, event?.nativeEvent);
@@ -14,5 +16,6 @@ export function customEventLogger(name: string) {
 
 export function logEvent(name: string, ...args: unknown[]) {
   // eslint-disable-next-line no-console
-  console.log(`Event: ${name}`, ...args);
+  console.log(`[${Date.now() - (lastEventTimeStamp ?? Date.now())}ms] Event: ${name}`, ...args);
+  lastEventTimeStamp = Date.now();
 }

src/__tests__/render.test.tsx

@@ -249,5 +249,5 @@ test('supports legacy rendering', () => {
 
 test('supports concurrent rendering', () => {
   render(<View testID="test" />, { concurrentRoot: true });
-  expect(screen.root).toBeDefined();
+  expect(screen.root).toBeOnTheScreen();
 });

src/fire-event.ts

@@ -7,7 +7,7 @@ import {
   ScrollViewProps,
 } from 'react-native';
 import act from './act';
-import { isHostElement } from './helpers/component-tree';
+import { isElementMounted, isHostElement } from './helpers/component-tree';
 import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isTextInputEditable } from './helpers/text-input';
@@ -121,6 +121,10 @@ type EventName = StringWithAutocomplete<
 >;
 
 function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: unknown[]) {
+  if (!isElementMounted(element)) {
+    return;
+  }
+
   setNativeStateIfNeeded(element, eventName, data[0]);
 
   const handler = findEventHandler(element, eventName);

src/helpers/component-tree.ts

@@ -1,5 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
-
+import { screen } from '../screen';
 /**
  * ReactTestInstance referring to host element.
  */
@@ -13,6 +13,10 @@ export function isHostElement(element?: ReactTestInstance | null): element is Ho
   return typeof element?.type === 'string';
 }
 
+export function isElementMounted(element: ReactTestInstance | null) {
+  return getUnsafeRootElement(element) === screen.UNSAFE_root;
+}
+
 /**
  * Returns first host ancestor for given element.
  * @param element The element start traversing from.

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

@@ -34,3 +34,98 @@ exports[`userEvent.longPress with fake timers calls onLongPress if the delayLong
   },
 ]
 `;
+
+exports[`userEvent.longPress with fake timers works on Pressable 1`] = `
+[
+  {
+    "name": "pressIn",
+    "payload": {
+      "currentTarget": {
+        "measure": [Function],
+      },
+      "dispatchConfig": {
+        "registrationName": "onResponderGrant",
+      },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
+      "nativeEvent": {
+        "changedTouches": [],
+        "identifier": 0,
+        "locationX": 0,
+        "locationY": 0,
+        "pageX": 0,
+        "pageY": 0,
+        "target": 0,
+        "timestamp": 0,
+        "touches": [],
+      },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
+      "target": {},
+      "timeStamp": 0,
+    },
+  },
+  {
+    "name": "longPress",
+    "payload": {
+      "currentTarget": {
+        "measure": [Function],
+      },
+      "dispatchConfig": {
+        "registrationName": "onResponderGrant",
+      },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
+      "nativeEvent": {
+        "changedTouches": [],
+        "identifier": 0,
+        "locationX": 0,
+        "locationY": 0,
+        "pageX": 0,
+        "pageY": 0,
+        "target": 0,
+        "timestamp": 0,
+        "touches": [],
+      },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
+      "target": {},
+      "timeStamp": 0,
+    },
+  },
+  {
+    "name": "pressOut",
+    "payload": {
+      "currentTarget": {
+        "measure": [Function],
+      },
+      "dispatchConfig": {
+        "registrationName": "onResponderRelease",
+      },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
+      "nativeEvent": {
+        "changedTouches": [],
+        "identifier": 0,
+        "locationX": 0,
+        "locationY": 0,
+        "pageX": 0,
+        "pageY": 0,
+        "target": 0,
+        "timestamp": 500,
+        "touches": [],
+      },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
+      "target": {},
+      "timeStamp": 0,
+    },
+  },
+]
+`;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOut prop of touchable 1`] = `
+exports[`userEvent.press with fake timers works on Pressable 1`] = `
 [
   {
     "name": "pressIn",
@@ -32,36 +32,6 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
       "timeStamp": 0,
     },
   },
-  {
-    "name": "press",
-    "payload": {
-      "currentTarget": {
-        "measure": [Function],
-      },
-      "dispatchConfig": {
-        "registrationName": "onResponderRelease",
-      },
-      "isDefaultPrevented": [Function],
-      "isPersistent": [Function],
-      "isPropagationStopped": [Function],
-      "nativeEvent": {
-        "changedTouches": [],
-        "identifier": 0,
-        "locationX": 0,
-        "locationY": 0,
-        "pageX": 0,
-        "pageY": 0,
-        "target": 0,
-        "timestamp": 0,
-        "touches": [],
-      },
-      "persist": [Function],
-      "preventDefault": [Function],
-      "stopPropagation": [Function],
-      "target": {},
-      "timeStamp": 0,
-    },
-  },
   {
     "name": "pressOut",
     "payload": {
@@ -82,7 +52,37 @@ exports[`userEvent.press with fake timers calls onPressIn, onPress and onPressOu
         "pageX": 0,
         "pageY": 0,
         "target": 0,
-        "timestamp": 0,
+        "timestamp": 130,
+        "touches": [],
+      },
+      "persist": [Function],
+      "preventDefault": [Function],
+      "stopPropagation": [Function],
+      "target": {},
+      "timeStamp": 0,
+    },
+  },
+  {
+    "name": "press",
+    "payload": {
+      "currentTarget": {
+        "measure": [Function],
+      },
+      "dispatchConfig": {
+        "registrationName": "onResponderRelease",
+      },
+      "isDefaultPrevented": [Function],
+      "isPersistent": [Function],
+      "isPropagationStopped": [Function],
+      "nativeEvent": {
+        "changedTouches": [],
+        "identifier": 0,
+        "locationX": 0,
+        "locationY": 0,
+        "pageX": 0,
+        "pageY": 0,
+        "target": 0,
+        "timestamp": 130,
         "touches": [],
       },
       "persist": [Function],

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Pressable, Text } from 'react-native';
-import { render, screen } from '../../../pure';
+import { Pressable, Text, TouchableHighlight, TouchableOpacity } from 'react-native';
+import { createEventLogger, getEventsNames } from '../../../test-utils';
+import { render, screen } from '../../..';
 import { userEvent } from '../..';
 
 describe('userEvent.longPress with real timers', () => {
@@ -9,6 +10,68 @@ describe('userEvent.longPress with real timers', () => {
     jest.restoreAllMocks();
   });
 
+  test('works on Pressable', 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.longPress(screen.getByTestId('pressable'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
+  });
+
+  test('works on TouchableOpacity', async () => {
+    const mockOnPress = jest.fn();
+
+    render(
+      <TouchableOpacity onPress={mockOnPress}>
+        <Text>press me</Text>
+      </TouchableOpacity>,
+    );
+
+    await userEvent.longPress(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.longPress(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.longPress(screen.getByText('press me'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
+  });
+
   test('calls onLongPress if the delayLongPress is the default one', async () => {
     const mockOnLongPress = jest.fn();
     const user = userEvent.setup();

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Pressable, Text } from 'react-native';
-import { render, screen } from '../../../pure';
+import { Pressable, Text, TouchableHighlight, TouchableOpacity } from 'react-native';
+import { createEventLogger, getEventsNames } from '../../../test-utils';
+import { render, screen } from '../../..';
 import { userEvent } from '../..';
-import { createEventLogger } from '../../../test-utils';
 
 describe('userEvent.longPress with fake timers', () => {
   beforeEach(() => {
@@ -10,6 +10,69 @@ describe('userEvent.longPress with fake timers', () => {
     jest.setSystemTime(0);
   });
 
+  test('works on Pressable', 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.longPress(screen.getByTestId('pressable'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
+    expect(events).toMatchSnapshot();
+  });
+
+  test('works on TouchableOpacity', async () => {
+    const mockOnPress = jest.fn();
+
+    render(
+      <TouchableOpacity onPress={mockOnPress}>
+        <Text>press me</Text>
+      </TouchableOpacity>,
+    );
+
+    await userEvent.longPress(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.longPress(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.longPress(screen.getByText('press me'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'longPress', 'pressOut']);
+  });
+
   test('calls onLongPress if the delayLongPress is the default one', async () => {
     const { logEvent, events } = createEventLogger();
     const user = userEvent.setup();

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Button,
   Pressable,
   Text,
   TextInput,
@@ -17,7 +18,7 @@ describe('userEvent.press with real timers', () => {
     jest.restoreAllMocks();
   });
 
-  test('calls onPressIn, onPress and onPressOut prop of touchable', async () => {
+  test('works on Pressable', async () => {
     const { events, logEvent } = createEventLogger();
     const user = userEvent.setup();
 
@@ -30,9 +31,77 @@ describe('userEvent.press with real timers', () => {
         testID="pressable"
       />,
     );
-    await user.press(screen.getByTestId('pressable'));
 
-    expect(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
+    await user.press(screen.getByTestId('pressable'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
+  });
+
+  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(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
+  });
+
+  test('works on TextInput', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <TextInput
+        placeholder="email"
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+      />,
+    );
+
+    await userEvent.press(screen.getByPlaceholderText('email'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
+  });
+
+  test('works on Button', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(<Button title="press me" onPress={logEvent('press')} />);
+
+    await userEvent.press(screen.getByText('press me'));
+    expect(getEventsNames(events)).toEqual(['press']);
   });
 
   test('does not trigger event when pressable is disabled', async () => {
@@ -128,7 +197,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 () => {
@@ -157,50 +226,6 @@ describe('userEvent.press with real timers', () => {
     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(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
-  });
-
   test('does not trigger on disabled Text', async () => {
     const { events, logEvent } = createEventLogger();
 
@@ -240,22 +265,7 @@ describe('userEvent.press with real timers', () => {
     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(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
-  });
-
-  test('does not call onPressIn and onPressOut on non editable TetInput', async () => {
+  test('does not call onPressIn and onPressOut on non editable TextInput', async () => {
     const { events, logEvent } = createEventLogger();
 
     render(
@@ -270,7 +280,7 @@ describe('userEvent.press with real timers', () => {
     expect(events).toEqual([]);
   });
 
-  test('does not call onPressIn and onPressOut on TetInput with pointer events disabled', async () => {
+  test('does not call onPressIn and onPressOut on TextInput with pointer events disabled', async () => {
     const { events, logEvent } = createEventLogger();
 
     render(
@@ -295,7 +305,6 @@ describe('userEvent.press with real timers', () => {
     );
 
     await userEvent.press(screen.getByText('press me'));
-
     expect(mockOnPress).toHaveBeenCalled();
   });
 });

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

@@ -18,7 +18,7 @@ describe('userEvent.press with fake timers', () => {
     jest.setSystemTime(0);
   });
 
-  test('calls onPressIn, onPress and onPressOut prop of touchable', async () => {
+  test('works on Pressable', async () => {
     const { events, logEvent } = createEventLogger();
     const user = userEvent.setup();
 
@@ -31,11 +31,80 @@ describe('userEvent.press with fake timers', () => {
         testID="pressable"
       />,
     );
-    await user.press(screen.getByTestId('pressable'));
 
+    await user.press(screen.getByTestId('pressable'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
     expect(events).toMatchSnapshot();
   });
 
+  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(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
+  });
+
+  test('works on TextInput', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(
+      <TextInput
+        placeholder="email"
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+      />,
+    );
+
+    await userEvent.press(screen.getByPlaceholderText('email'));
+    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
+  });
+
+  test('works on Button', async () => {
+    const { events, logEvent } = createEventLogger();
+
+    render(<Button title="press me" onPress={logEvent('press')} />);
+
+    await userEvent.press(screen.getByText('press me'));
+    expect(getEventsNames(events)).toEqual(['press']);
+  });
+
   test('does not trigger event when pressable is disabled', async () => {
     const { events, logEvent } = createEventLogger();
     const user = userEvent.setup();
@@ -129,7 +198,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 () => {
@@ -158,59 +227,6 @@ describe('userEvent.press with fake timers', () => {
     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('press 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(getEventsNames(events)).toEqual(['pressIn', 'press', 'pressOut']);
-  });
-
-  test('press works on Button', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(<Button title="press me" onPress={logEvent('press')} />);
-
-    await userEvent.press(screen.getByText('press me'));
-    expect(getEventsNames(events)).toEqual(['press']);
-  });
-
   test('longPress works Text', async () => {
     const { events, logEvent } = createEventLogger();
 
@@ -268,36 +284,6 @@ describe('userEvent.press with fake timers', () => {
     expect(events).toEqual([]);
   });
 
-  test('press works on TextInput', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <TextInput
-        placeholder="email"
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-      />,
-    );
-
-    await userEvent.press(screen.getByPlaceholderText('email'));
-    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
-  });
-
-  test('longPress works on TextInput', async () => {
-    const { events, logEvent } = createEventLogger();
-
-    render(
-      <TextInput
-        placeholder="email"
-        onPressIn={logEvent('pressIn')}
-        onPressOut={logEvent('pressOut')}
-      />,
-    );
-
-    await userEvent.longPress(screen.getByPlaceholderText('email'));
-    expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut']);
-  });
-
   test('does not call onPressIn and onPressOut on non editable TextInput', async () => {
     const { events, logEvent } = createEventLogger();
 
@@ -372,3 +358,27 @@ describe('userEvent.press with fake timers', () => {
     expect(consoleErrorSpy).not.toHaveBeenCalled();
   });
 });
+
+function Component() {
+  const [mounted, setMounted] = React.useState(true);
+
+  const onPressIn = () => {
+    setMounted(false);
+  };
+
+  return (
+    <View>
+      {mounted && (
+        <Pressable onPressIn={onPressIn}>
+          <Text>Unmount</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+test('unmounts component', async () => {
+  render(<Component />);
+  await userEvent.press(screen.getByText('Unmount'));
+  expect(screen.queryByText('Unmount')).not.toBeOnTheScreen();
+});

src/user-event/press/constants.ts

@@ -1,7 +0,0 @@
-// 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;

src/user-event/press/press.ts

@@ -7,7 +7,11 @@ 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
+// See: https://github.com/facebook/react-native/blob/50e38cc9f1e6713228a91ad50f426c4f65e65e1a/packages/react-native/Libraries/Pressability/Pressability.js#L264
+export const DEFAULT_MIN_PRESS_DURATION = 130;
+export const DEFAULT_LONG_PRESS_DELAY_MS = 500;
 
 export interface PressOptions {
   duration?: number;
@@ -16,7 +20,6 @@ export interface PressOptions {
 export async function press(this: UserEventInstance, element: ReactTestInstance): Promise<void> {
   await basePress(this.config, element, {
     type: 'press',
-    duration: 0,
   });
 }
 
@@ -27,13 +30,13 @@ 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,
   });
 }
 
 interface BasePressOptions {
   type: 'press' | 'longPress';
-  duration: number;
+  duration?: number;
 }
 
 const basePress = async (
@@ -73,16 +76,17 @@ const emitPressablePressEvents = async (
 
   dispatchEvent(element, 'responderGrant', EventBuilder.Common.responderGrant());
 
-  await wait(config, options.duration);
+  const duration = 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) {
+  if (DEFAULT_MIN_PRESS_DURATION - duration > 0) {
     await act(async () => {
-      await wait(config, DEFAULT_MIN_PRESS_DURATION - options.duration);
+      await wait(config, DEFAULT_MIN_PRESS_DURATION - duration);
     });
   }
 };
@@ -118,11 +122,22 @@ async function emitTextPressEvents(
   await wait(config);
   dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
 
-  // Emit either `press` or `longPress`.
-  dispatchEvent(element, options.type, EventBuilder.Common.touch());
-
   await wait(config, options.duration);
+
+  // Long press events are emitted before `pressOut`.
+  if (options.type === 'longPress') {
+    dispatchEvent(element, 'longPress', EventBuilder.Common.touch());
+  }
+
   dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
+
+  // 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());
+  }
 }
 
 /**

src/user-event/utils/dispatch-event.ts

@@ -1,5 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import act from '../../act';
+import { isElementMounted } from '../../helpers/component-tree';
 
 /**
  * Basic dispatch event function used by User Event module.
@@ -9,6 +10,10 @@ import act from '../../act';
  * @param event event payload(s)
  */
 export function dispatchEvent(element: ReactTestInstance, eventName: string, ...event: unknown[]) {
+  if (!isElementMounted(element)) {
+    return;
+  }
+
   const handler = getEventHandler(element, eventName);
   if (!handler) {
     return;