fix: RN Gesture Handler Pressable support

Author: mdjastrzebski

package.json

@@ -50,6 +50,7 @@
     "chalk": "^4.1.2",
     "jest-matcher-utils": "^29.7.0",
     "pretty-format": "^29.7.0",
+    "react-native-gesture-handler": "^2.23.1",
     "redent": "^3.0.0"
   },
   "peerDependencies": {

src/__tests__/react-native-gesture-handler.test.tsx

@@ -0,0 +1,90 @@
+import 'react-native-gesture-handler/jestSetup.js';
+import React from 'react';
+import { View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+
+import { fireEvent, render, screen, userEvent } from '..';
+import { createEventLogger, getEventsNames } from '../test-utils';
+
+test('fireEvent can invoke press events for RNGH Pressable', () => {
+  const onPress = jest.fn();
+  const onPressIn = jest.fn();
+  const onPressOut = jest.fn();
+  const onLongPress = jest.fn();
+
+  render(
+    <View>
+      <Pressable
+        testID="pressable"
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onLongPress={onLongPress}
+      />
+    </View>,
+  );
+
+  const pressable = screen.getByTestId('pressable');
+
+  fireEvent.press(pressable);
+  expect(onPress).toHaveBeenCalled();
+
+  fireEvent(pressable, 'pressIn');
+  expect(onPressIn).toHaveBeenCalled();
+
+  fireEvent(pressable, 'pressOut');
+  expect(onPressOut).toHaveBeenCalled();
+
+  fireEvent(pressable, 'longPress');
+  expect(onLongPress).toHaveBeenCalled();
+});
+
+test('userEvent can invoke press events for RNGH Pressable', async () => {
+  const { events, logEvent } = createEventLogger();
+  const user = userEvent.setup();
+
+  render(
+    <View>
+      <Pressable
+        testID="pressable"
+        onPress={logEvent('press')}
+        onPressIn={logEvent('pressIn')}
+        onPressOut={logEvent('pressOut')}
+        onLongPress={logEvent('longPress')}
+      />
+    </View>,
+  );
+
+  expect(screen.toJSON()).toMatchInlineSnapshot(`
+    <View>
+      <RNGestureHandlerButton
+        collapsable={false}
+        enabled={true}
+        hitSlop={
+          {
+            "bottom": 0,
+            "left": 0,
+            "right": 0,
+            "top": 0,
+          }
+        }
+        rippleColor="transparent"
+        style={
+          [
+            {},
+            undefined,
+          ]
+        }
+        testID="pressable"
+        testOnly_onLongPress={[Function]}
+        testOnly_onPress={[Function]}
+        testOnly_onPressIn={[Function]}
+        testOnly_onPressOut={[Function]}
+      />
+    </View>
+  `);
+
+  const pressable = screen.getByTestId('pressable');
+  await user.press(pressable);
+  expect(getEventsNames(events)).toEqual(['pressIn', 'pressOut', 'press']);
+});

src/helpers/host-component-names.ts

@@ -9,19 +9,28 @@ const HOST_SWITCH_NAMES = ['RCTSwitch'];
 const HOST_SCROLL_VIEW_NAMES = ['RCTScrollView'];
 const HOST_MODAL_NAMES = ['Modal'];
 
+export type HostText = HostTestInstance & {
+  type: 'Text';
+};
+
 /**
  * Checks if the given element is a host Text element.
  * @param element The element to check.
  */
-export function isHostText(element: ReactTestInstance): element is HostTestInstance {
+export function isHostText(element: ReactTestInstance): element is HostText {
   return typeof element?.type === 'string' && HOST_TEXT_NAMES.includes(element.type);
 }
 
+export type HostTextInput = HostTestInstance & {
+  type: 'TextInput';
+  editable?: boolean;
+};
+
 /**
  * Checks if the given element is a host TextInput element.
  * @param element The element to check.
  */
-export function isHostTextInput(element: ReactTestInstance): element is HostTestInstance {
+export function isHostTextInput(element: ReactTestInstance): element is HostTextInput {
   return typeof element?.type === 'string' && HOST_TEXT_INPUT_NAMES.includes(element.type);
 }
 

src/user-event/press/press.ts

@@ -1,8 +1,9 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 
 import act from '../../act';
-import { getHostParent } from '../../helpers/component-tree';
-import { isHostText } from '../../helpers/host-component-names';
+import { getEventHandler } from '../../event-handler';
+import { getHostParent, isHostElement } from '../../helpers/component-tree';
+import { isHostTextInput } from '../../helpers/host-component-names';
 import { isPointerEventEnabled } from '../../helpers/pointer-events';
 import { isEditableTextInput } from '../../helpers/text-input';
 import { EventBuilder } from '../event-builder';
@@ -45,13 +46,13 @@ const basePress = async (
   element: ReactTestInstance,
   options: BasePressOptions,
 ): Promise<void> => {
-  if (isPressableText(element)) {
-    await emitTextPressEvents(config, element, options);
+  if (isEditableTextInput(element) && isPointerEventEnabled(element)) {
+    await emitTextInputPressEvents(config, element, options);
     return;
   }
 
-  if (isEditableTextInput(element) && isPointerEventEnabled(element)) {
-    await emitTextInputPressEvents(config, element, options);
+  if (isHostPressable(element)) {
+    await emitTextPressEvents(config, element, options);
     return;
   }
 
@@ -96,16 +97,16 @@ const isEnabledTouchResponder = (element: ReactTestInstance) => {
   return isPointerEventEnabled(element) && element.props.onStartShouldSetResponder?.();
 };
 
-const isPressableText = (element: ReactTestInstance) => {
-  const hasPressEventHandler = Boolean(
-    element.props.onPress ||
-      element.props.onLongPress ||
-      element.props.onPressIn ||
-      element.props.onPressOut,
-  );
+const isHostPressable = (element: ReactTestInstance) => {
+  const hasPressEventHandler =
+    getEventHandler(element, 'press') ||
+    getEventHandler(element, 'longPress') ||
+    getEventHandler(element, 'pressIn') ||
+    getEventHandler(element, 'pressOut');
 
   return (
-    isHostText(element) &&
+    isHostElement(element) &&
+    !isHostTextInput(element) &&
     isPointerEventEnabled(element) &&
     !element.props.disabled &&
     hasPressEventHandler

yarn.lock

@@ -1601,6 +1601,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@egjs/hammerjs@npm:^2.0.17":
+  version: 2.0.17
+  resolution: "@egjs/hammerjs@npm:2.0.17"
+  dependencies:
+    "@types/hammerjs": "npm:^2.0.36"
+  checksum: 10c0/dbedc15a0e633f887c08394bd636faf6a3abd05726dc0909a0e01209d5860a752d9eca5e512da623aecfabe665f49f1d035de3103eb2f9022c5cea692f9cc9be
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.4.1
   resolution: "@eslint-community/eslint-utils@npm:4.4.1"
@@ -2844,6 +2853,7 @@ __metadata:
     pretty-format: "npm:^29.7.0"
     react: "npm:^19.0.0"
     react-native: "npm:0.78.0-rc.5"
+    react-native-gesture-handler: "npm:^2.23.1"
     react-test-renderer: "npm:^19.0.0"
     redent: "npm:^3.0.0"
     release-it: "npm:^18.0.0"
@@ -2924,6 +2934,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hammerjs@npm:^2.0.36":
+  version: 2.0.46
+  resolution: "@types/hammerjs@npm:2.0.46"
+  checksum: 10c0/f3c1cb20dc2f0523f7b8c76065078544d50d8ae9b0edc1f62fed657210ed814266ff2dfa835d2c157a075991001eec3b64c88bf92e3e6e895c0db78d05711d06
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.6
   resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
@@ -6103,6 +6120,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hoist-non-react-statics@npm:^3.3.0":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: "npm:^16.7.0"
+  checksum: 10c0/fe0889169e845d738b59b64badf5e55fa3cf20454f9203d1eb088df322d49d4318df774828e789898dcb280e8a5521bb59b3203385662ca5e9218a6ca5820e74
+  languageName: node
+  linkType: hard
+
 "hosted-git-info@npm:^7.0.0":
   version: 7.0.2
   resolution: "hosted-git-info@npm:7.0.2"
@@ -9141,7 +9167,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -9162,6 +9188,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-gesture-handler@npm:^2.23.1":
+  version: 2.23.1
+  resolution: "react-native-gesture-handler@npm:2.23.1"
+  dependencies:
+    "@egjs/hammerjs": "npm:^2.0.17"
+    hoist-non-react-statics: "npm:^3.3.0"
+    invariant: "npm:^2.2.4"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/02ad664662a529836aaae2f6bce5943ccd3193d33641e6328d1306e6cb82eb5d859c5f9975c557f6e6daf1ffb7e7f6cd8432dac70a727110bff887e554673c7c
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.78.0-rc.5":
   version: 0.78.0-rc.5
   resolution: "react-native@npm:0.78.0-rc.5"