classic fire event simulation using fibers

Author: mdjastrzebski

package.json

@@ -93,7 +93,7 @@
     "release-it": "^18.0.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.19.1",
-    "universal-test-renderer": "0.8.1"
+    "universal-test-renderer": "0.8.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

src/__tests__/fire-event.test.tsx

@@ -49,14 +49,11 @@ describe('fireEvent', () => {
     expect(onPressMock).toHaveBeenCalled();
   });
 
-  test('should not fire if the press handler is not passed to children', () => {
+  test('should fire if the press handler is not passed to children', () => {
     const onPressMock = jest.fn();
-    render(
-      // TODO: this functionality is buggy, i.e. it will fail if we wrap this component with a View.
-      <WithoutEventComponent onPress={onPressMock} />,
-    );
+    render(<WithoutEventComponent onPress={onPressMock} />);
     fireEvent(screen.getByText('Without event'), 'press');
-    expect(onPressMock).not.toHaveBeenCalled();
+    expect(onPressMock).toHaveBeenCalled();
   });
 });
 

src/event-handler.ts

@@ -30,6 +30,35 @@ export function getEventHandler(
   return undefined;
 }
 
+export function getFiberEventHandler(
+  element: HostElement['unstable_fiber'],
+  eventName: string,
+  options?: EventHandlerOptions,
+) {
+  if (element === null || !element.memoizedProps) {
+    return undefined;
+  }
+
+  const handlerName = getEventHandlerName(eventName);
+  if (typeof element.memoizedProps[handlerName] === 'function') {
+    return element.memoizedProps[handlerName];
+  }
+
+  if (options?.loose && typeof element.memoizedProps[eventName] === 'function') {
+    return element.memoizedProps[eventName];
+  }
+
+  if (typeof element.memoizedProps[`testOnly_${handlerName}`] === 'function') {
+    return element.memoizedProps[`testOnly_${handlerName}`];
+  }
+
+  if (options?.loose && typeof element.memoizedProps[`testOnly_${eventName}`] === 'function') {
+    return element.memoizedProps[`testOnly_${eventName}`];
+  }
+
+  return undefined;
+}
+
 export function getEventHandlerName(eventName: string) {
   return `on${capitalizeFirstLetter(eventName)}`;
 }

src/fire-event.ts

@@ -8,14 +8,13 @@ import type {
 import type { HostElement } from 'universal-test-renderer';
 
 import act from './act';
-import { getEventHandler } from './event-handler';
+import { getEventHandler, getFiberEventHandler } from './event-handler';
 import { isElementMounted } from './helpers/component-tree';
 import { isHostScrollView, isHostTextInput } from './helpers/host-component-names';
 import { isPointerEventEnabled } from './helpers/pointer-events';
 import { isEditableTextInput } from './helpers/text-input';
 import { nativeState } from './native-state';
 import type { Point, StringWithAutocomplete } from './types';
-import { EventBuilder } from './user-event/event-builder';
 
 type EventHandler = (...args: unknown[]) => unknown;
 
@@ -86,19 +85,40 @@ function findEventHandler(
 ): EventHandler | null {
   const touchResponder = isTouchResponder(element) ? element : nearestTouchResponder;
 
-  const handler = getEventHandler(element, eventName, { loose: true });
+  const handler =
+    getEventHandler(element, eventName, { loose: true }) ??
+    findEventHandlerFromFiber(element.unstable_fiber, eventName);
   if (handler && isEventEnabled(element, eventName, touchResponder)) {
     return handler;
   }
 
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-  if (element.parent === null || element.parent.parent === null) {
+  if (element.parent === null) {
     return null;
   }
 
   return findEventHandler(element.parent, eventName, touchResponder);
 }
 
+type Fiber = HostElement['unstable_fiber'];
+
+function findEventHandlerFromFiber(fiber: Fiber, eventName: string): EventHandler | null {
+  if (fiber === null) {
+    return null;
+  }
+
+  const handler = getFiberEventHandler(fiber, eventName, { loose: true });
+  if (handler) {
+    return handler;
+  }
+
+  // No parent fiber or we reached another host element
+  if (fiber.return === null || typeof fiber.return.type === 'string') {
+    return null;
+  }
+
+  return findEventHandlerFromFiber(fiber.return, eventName);
+}
+
 // 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];
@@ -132,37 +152,9 @@ function fireEvent(element: HostElement, eventName: EventName, ...data: unknown[
   return returnValue;
 }
 
-fireEvent.press = (element: HostElement, ...data: unknown[]) => {
-  const nativeData =
-    data.length === 1 &&
-    typeof data[0] === 'object' &&
-    data[0] !== null &&
-    'nativeEvent' in data[0] &&
-    typeof data[0].nativeEvent === 'object'
-      ? data[0].nativeEvent
-      : null;
-
-  const responderGrantEvent = EventBuilder.Common.responderGrant();
-  if (nativeData) {
-    responderGrantEvent.nativeEvent = {
-      ...responderGrantEvent.nativeEvent,
-      ...nativeData,
-    };
-  }
-  fireEvent(element, 'responderGrant', responderGrantEvent);
-
+fireEvent.press = (element: HostElement, ...data: unknown[]) =>
   fireEvent(element, 'press', ...data);
 
-  const responderReleaseEvent = EventBuilder.Common.responderRelease();
-  if (nativeData) {
-    responderReleaseEvent.nativeEvent = {
-      ...responderReleaseEvent.nativeEvent,
-      ...nativeData,
-    };
-  }
-  fireEvent(element, 'responderRelease', responderReleaseEvent);
-};
-
 fireEvent.changeText = (element: HostElement, ...data: unknown[]) =>
   fireEvent(element, 'changeText', ...data);
 

src/helpers/accessibility.ts

@@ -157,8 +157,8 @@ export function computeAriaModal(element: HostElement): boolean | undefined {
 export function computeAriaLabel(element: HostElement): string | undefined {
   const labelElementId = element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy;
   if (labelElementId) {
-    const rootElement = getContainerElement(element);
-    const labelElement = findAll(rootElement, (node) => node.props.nativeID === labelElementId, {
+    const container = getContainerElement(element);
+    const labelElement = findAll(container, (node) => node.props.nativeID === labelElementId, {
       includeHiddenElements: true,
     });
     if (labelElement.length > 0) {

src/helpers/component-tree.ts

@@ -2,8 +2,16 @@ import type { HostElement } from 'universal-test-renderer';
 
 import { screen } from '../screen';
 
+/**
+ * Checks if the given element is a host element.
+ * @param element The element to check.
+ */
+export function isValidHostElement(element?: HostElement | null): element is HostElement {
+  return typeof element?.type === 'string' && element.props !== null;
+}
+
 export function isElementMounted(element: HostElement) {
-  return true; // getContainerElement(element) === screen.container;
+  return getContainerElement(element) === screen.container;
 }
 
 /**

src/helpers/find-all.ts

@@ -1,5 +1,4 @@
-import type { ContainerElement, HostElement } from 'universal-test-renderer';
-import { findAll as findAllInternal } from 'universal-test-renderer';
+import type { HostElement } from 'universal-test-renderer';
 
 import { getConfig } from '../config';
 import { isHiddenFromAccessibility } from './accessibility';
@@ -16,11 +15,11 @@ interface FindAllOptions {
 }
 
 export function findAll(
-  root: ContainerElement | HostElement,
+  root: HostElement,
   predicate: (element: HostElement) => boolean,
   options?: FindAllOptions,
 ): HostElement[] {
-  const results = findAllInternal(root, predicate, options);
+  const results = root.findAll(predicate, options);
 
   const includeHiddenElements =
     options?.includeHiddenElements ?? options?.hidden ?? getConfig()?.defaultIncludeHiddenElements;

src/matchers/__tests__/to-be-visible.test.tsx

@@ -237,13 +237,22 @@ test('toBeVisible() on null elements', () => {
 });
 
 test('toBeVisible() on non-React elements', () => {
-  expect(() =>
-    expect({ name: 'Non-React element' }).not.toBeVisible(),
-  ).toThrowErrorMatchingInlineSnapshot(`"Cannot read properties of undefined (reading 'style')"`);
+  expect(() => expect({ name: 'Non-React element' }).not.toBeVisible())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).not.toBeVisible()
 
-  expect(() => expect(true).not.toBeVisible()).toThrowErrorMatchingInlineSnapshot(
-    `"Invalid value used as weak map key"`,
-  );
+    received value must be a host element.
+    Received has type:  object
+    Received has value: {"name": "Non-React element"}"
+  `);
+
+  expect(() => expect(true).not.toBeVisible()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).not.toBeVisible()
+
+    received value must be a host element.
+    Received has type:  boolean
+    Received has value: true"
+  `);
 });
 
 test('toBeVisible() does not throw on invalid style', () => {

src/matchers/__tests__/to-contain-element.test.tsx

@@ -100,13 +100,22 @@ test('toContainElement() handles non-element container', () => {
 
   const view = screen.getByTestId('view');
 
-  expect(() =>
-    expect({ name: 'non-element' }).not.toContainElement(view),
-  ).toThrowErrorMatchingInlineSnapshot(`"Cannot read properties of undefined (reading 'forEach')"`);
+  expect(() => expect({ name: 'non-element' }).not.toContainElement(view))
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).not.toContainElement()
 
-  expect(() => expect(true).not.toContainElement(view)).toThrowErrorMatchingInlineSnapshot(
-    `"Cannot read properties of undefined (reading 'forEach')"`,
-  );
+    received value must be a host element.
+    Received has type:  object
+    Received has value: {"name": "non-element"}"
+  `);
+
+  expect(() => expect(true).not.toContainElement(view)).toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).not.toContainElement()
+
+    received value must be a host element.
+    Received has type:  boolean
+    Received has value: true"
+  `);
 });
 
 test('toContainElement() handles non-element element', () => {

src/matchers/__tests__/to-have-accessible-name.test.tsx

@@ -121,11 +121,19 @@ test('toHaveAccessibleName() handles a view without name when called without exp
 it('toHaveAccessibleName() rejects non-host element', () => {
   const nonElement = 'This is not a HostElement';
 
-  expect(() => expect(nonElement).toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(
-    `"Cannot read properties of undefined (reading 'aria-labelledby')"`,
-  );
+  expect(() => expect(nonElement).toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).toHaveAccessibleName()
 
-  expect(() => expect(nonElement).not.toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(
-    `"Cannot read properties of undefined (reading 'aria-labelledby')"`,
-  );
+    received value must be a host element.
+    Received has type:  string
+    Received has value: "This is not a HostElement""
+  `);
+
+  expect(() => expect(nonElement).not.toHaveAccessibleName()).toThrowErrorMatchingInlineSnapshot(`
+    "expect(received).not.toHaveAccessibleName()
+
+    received value must be a host element.
+    Received has type:  string
+    Received has value: "This is not a HostElement""
+  `);
 });