feat: testOnly event handlers

Author: mdjastrzebski

src/__tests__/event-handler.test.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { render, screen } from '../..';
+import { getEventHandler } from '../event-handler';
+
+test('getEventHandler strict mode', () => {
+  const onPress = jest.fn();
+  const testOnlyOnPress = jest.fn();
+
+  render(
+    <View>
+      <Text testID="regular" onPress={onPress} />
+      {/* @ts-expect-error Intentionally passing such props */}
+      <View testID="testOnly" testOnly_onPress={testOnlyOnPress} />
+      {/* @ts-expect-error Intentionally passing such props */}
+      <View testID="both" onPress={onPress} testOnly_onPress={testOnlyOnPress} />
+    </View>,
+  );
+
+  const regular = screen.getByTestId('regular');
+  const testOnly = screen.getByTestId('testOnly');
+  const both = screen.getByTestId('both');
+
+  expect(getEventHandler(regular, 'press')).toBe(onPress);
+  expect(getEventHandler(testOnly, 'press')).toBe(testOnlyOnPress);
+  expect(getEventHandler(both, 'press')).toBe(onPress);
+
+  expect(getEventHandler(regular, 'onPress')).toBe(undefined);
+  expect(getEventHandler(testOnly, 'onPress')).toBe(undefined);
+  expect(getEventHandler(both, 'onPress')).toBe(undefined);
+});
+
+test('getEventHandler loose mode', () => {
+  const onPress = jest.fn();
+  const testOnlyOnPress = jest.fn();
+
+  render(
+    <View>
+      <Text testID="regular" onPress={onPress} />
+      {/* @ts-expect-error Intentionally passing such props */}
+      <View testID="testOnly" testOnly_onPress={testOnlyOnPress} />
+      {/* @ts-expect-error Intentionally passing such props */}
+      <View testID="both" onPress={onPress} testOnly_onPress={testOnlyOnPress} />
+    </View>,
+  );
+
+  const regular = screen.getByTestId('regular');
+  const testOnly = screen.getByTestId('testOnly');
+  const both = screen.getByTestId('both');
+
+  expect(getEventHandler(regular, 'press', { loose: true })).toBe(onPress);
+  expect(getEventHandler(testOnly, 'press', { loose: true })).toBe(testOnlyOnPress);
+  expect(getEventHandler(both, 'press', { loose: true })).toBe(onPress);
+
+  expect(getEventHandler(regular, 'onPress', { loose: true })).toBe(onPress);
+  expect(getEventHandler(testOnly, 'onPress', { loose: true })).toBe(testOnlyOnPress);
+  expect(getEventHandler(both, 'onPress', { loose: true })).toBe(onPress);
+});

src/event-handler.ts

@@ -0,0 +1,38 @@
+import type { ReactTestInstance } from 'react-test-renderer';
+
+export type EventHandlerOptions = {
+  loose?: boolean;
+};
+
+export function getEventHandler(
+  element: ReactTestInstance,
+  eventName: string,
+  options?: EventHandlerOptions,
+) {
+  const handlerName = getEventHandlerName(eventName);
+  if (typeof element.props[handlerName] === 'function') {
+    return element.props[handlerName];
+  }
+
+  if (options?.loose && typeof element.props[eventName] === 'function') {
+    return element.props[eventName];
+  }
+
+  if (typeof element.props[`testOnly_${handlerName}`] === 'function') {
+    return element.props[`testOnly_${handlerName}`];
+  }
+
+  if (options?.loose && typeof element.props[`testOnly_${eventName}`] === 'function') {
+    return element.props[`testOnly_${eventName}`];
+  }
+
+  return undefined;
+}
+
+export function getEventHandlerName(eventName: string) {
+  return `on${capitalizeFirstLetter(eventName)}`;
+}
+
+function capitalizeFirstLetter(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

src/fire-event.ts

@@ -8,6 +8,7 @@ import type {
 import type { ReactTestInstance } from 'react-test-renderer';
 
 import act from './act';
+import { getEventHandler } from './event-handler';
 import { isElementMounted, isHostElement } from './helpers/component-tree';
 import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
@@ -80,7 +81,7 @@ function findEventHandler(
 ): EventHandler | null {
   const touchResponder = isTouchResponder(element) ? element : nearestTouchResponder;
 
-  const handler = getEventHandler(element, eventName);
+  const handler = getEventHandler(element, eventName, { loose: true });
   if (handler && isEventEnabled(element, eventName, touchResponder)) return handler;
 
   // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
@@ -91,23 +92,6 @@ function findEventHandler(
   return findEventHandler(element.parent, eventName, touchResponder);
 }
 
-function getEventHandler(element: ReactTestInstance, eventName: string) {
-  const eventHandlerName = getEventHandlerName(eventName);
-  if (typeof element.props[eventHandlerName] === 'function') {
-    return element.props[eventHandlerName];
-  }
-
-  if (typeof element.props[eventName] === 'function') {
-    return element.props[eventName];
-  }
-
-  return undefined;
-}
-
-function getEventHandlerName(eventName: string) {
-  return `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
-}
-
 // String union type of keys of T that start with on, stripped of 'on'
 type EventNameExtractor<T> = keyof {
   [K in keyof T as K extends `on${infer Rest}` ? Uncapitalize<Rest> : never]: T[K];

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

@@ -1,6 +1,7 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 
 import act from '../../act';
+import { getEventHandler } from '../../event-handler';
 import { isElementMounted } from '../../helpers/component-tree';
 
 /**
@@ -25,17 +26,3 @@ export function dispatchEvent(element: ReactTestInstance, eventName: string, ...
     handler(...event);
   });
 }
-
-function getEventHandler(element: ReactTestInstance, eventName: string) {
-  const handleName = getEventHandlerName(eventName);
-  const handle = element.props[handleName] as unknown;
-  if (typeof handle !== 'function') {
-    return undefined;
-  }
-
-  return handle;
-}
-
-function getEventHandlerName(eventName: string) {
-  return `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
-}