cleanup

Author: mdjastrzebski

src/events/dispatch-event.ts

@@ -14,16 +14,15 @@ import { invokeEventHandler } from './shared/invoke-event-handler';
  * `configure({ eventSystem })`. Used by `userEvent`.
  *
  * - `legacy`: calls the element's own `on*` prop with `event` as it is.
- * - `modern`: native events (`focus`, `change`, `scroll`, ...) get a `SyntheticEvent` created from
- *   `event.nativeEvent` and `event.timeStamp`, dispatched as React Native does, through the capture and bubble phases
- *   for bubbling events. Callbacks that components call from JavaScript (`changeText`, `pressIn`,
- *   `responderGrant`, ...) call the element's own `on*` prop with `event` as it is, as in
- *   `legacy`. `press` is a native event type (`topPress`), so it reaches host `onPress` props
- *   only, not `Pressable`'s `onPress`.
+ * - `modern`: native events (`focus`, `change`, `scroll`, ...) get a `SyntheticEvent` from
+ *   `event.nativeEvent` and `event.timeStamp`, dispatched as React Native does (capture and bubble
+ *   phases for bubbling events). Callbacks that components call from JavaScript (`changeText`,
+ *   `pressIn`, `responderGrant`, ...) are called as in `legacy`. `press` is a native event type
+ *   (`topPress`), so it reaches host `onPress` props only, not `Pressable`'s `onPress`.
  *
  * @param eventType without the `on*` prefix, e.g. `focus`
- * @param event the event object, e.g. from `buildFocusEvent()`, or the callback's argument, e.g. the
- * text for `changeText`
+ * @param event the event object, e.g. from `buildFocusEvent()`, or the callback's argument, e.g.
+ * the text for `changeText`
  * @returns `true` if a handler was called.
  */
 export async function dispatchEvent(
@@ -41,17 +40,12 @@ export async function dispatchEvent(
       ? createEvent(eventType, { nativeEvent, timeStamp: extractTimeStamp(event) })
       : null;
   if (syntheticEvent == null) {
-    // JavaScript callbacks, e.g. `changeText`, are called as in the legacy event system.
     return await invokeEventHandler(instance, eventType, event);
   }
 
   return await dispatchModernEvent(instance, syntheticEvent);
 }
 
-/**
- * Returns the `nativeEvent` payload if this is a native event: an event type React Native
- * dispatches natively, with an event object that has a `nativeEvent`.
- */
 function extractNativeEvent(eventType: string, event: unknown): NativeEventPayload | null {
   if (getEventTypeConfig(eventType) == null) {
     return null;

src/events/modern/__tests__/event-types.test.ts

@@ -1,3 +1,4 @@
+import { createEvent } from '../event';
 import {
   BUBBLING_EVENT_TYPES,
   DIRECT_EVENT_TYPES,
@@ -13,7 +14,6 @@ type ViewConfig = {
   directEventTypes?: Record<string, { registrationName: string }>;
 };
 
-// Base view configs plus the built-in components that declare events.
 const viewConfigModules = [
   'react-native/Libraries/NativeComponent/BaseViewConfig.ios',
   'react-native/Libraries/NativeComponent/BaseViewConfig.android',
@@ -39,23 +39,6 @@ const optionalViewConfigModules = [
 // Not exported by React Native, so listed by hand in `event-types.ts`.
 const manualDirectEventTypes = ['textLayout'];
 
-function toEventType(topLevelType: string) {
-  return topLevelType.charAt(3).toLowerCase() + topLevelType.slice(4);
-}
-
-function loadViewConfigs(): ViewConfig[] {
-  const modules = viewConfigModules.map((modulePath) => jest.requireActual(modulePath));
-  for (const modulePath of optionalViewConfigModules) {
-    try {
-      modules.push(jest.requireActual(modulePath));
-    } catch {
-      // Not available in the installed React Native version.
-    }
-  }
-
-  return modules.map((module) => module.__INTERNAL_VIEW_CONFIG ?? module.default);
-}
-
 function loadReactNativeEventTypes() {
   const bubbling = new Set<string>();
   const skipBubbling = new Set<string>();
@@ -64,8 +47,8 @@ function loadReactNativeEventTypes() {
   for (const viewConfig of loadViewConfigs()) {
     for (const [topLevelType, config] of Object.entries(viewConfig.bubblingEventTypes ?? {})) {
       const eventType = toEventType(topLevelType);
-      // `getEventTypeConfig()` derives prop names from the event type.
-      expect(getEventTypeConfig(eventType)?.dispatchConfig).toEqual({
+      // Prop names derived from the event type match React Native's.
+      expect(getDispatchConfig(eventType)).toEqual({
         phasedRegistrationNames: config.phasedRegistrationNames,
       });
       bubbling.add(eventType);
@@ -81,7 +64,7 @@ function loadReactNativeEventTypes() {
       }
 
       const eventType = toEventType(topLevelType);
-      expect(getEventTypeConfig(eventType)?.dispatchConfig).toEqual({
+      expect(getDispatchConfig(eventType)).toEqual({
         registrationName: config.registrationName,
       });
       direct.add(eventType);
@@ -91,6 +74,27 @@ function loadReactNativeEventTypes() {
   return { bubbling, skipBubbling, direct };
 }
 
+function loadViewConfigs(): ViewConfig[] {
+  const modules = viewConfigModules.map((modulePath) => jest.requireActual(modulePath));
+  for (const modulePath of optionalViewConfigModules) {
+    try {
+      modules.push(jest.requireActual(modulePath));
+    } catch {
+      // Not available in the installed React Native version.
+    }
+  }
+
+  return modules.map((module) => module.__INTERNAL_VIEW_CONFIG ?? module.default);
+}
+
+function toEventType(topLevelType: string) {
+  return topLevelType.charAt(3).toLowerCase() + topLevelType.slice(4);
+}
+
+function getDispatchConfig(eventType: string) {
+  return createEvent(eventType)?.dispatchConfig;
+}
+
 // The lists are the union across supported React Native versions, so older versions declare only a
 // subset of them (e.g. `keyDown` and `keyUp` were added in React Native 0.84).
 test('event types cover React Native view configs', () => {
@@ -104,32 +108,23 @@ test('event types cover React Native view configs', () => {
 test('getEventTypeConfig() returns config of bubbling event', () => {
   expect(getEventTypeConfig('pointerUp')).toEqual({
     kind: 'bubbling',
+    handlerName: 'onPointerUp',
+    captureHandlerName: 'onPointerUpCapture',
     skipBubbling: false,
-    dispatchConfig: {
-      phasedRegistrationNames: { bubbled: 'onPointerUp', captured: 'onPointerUpCapture' },
-    },
   });
 });
 
 test('getEventTypeConfig() returns config of bubbling event with skipBubbling', () => {
   expect(getEventTypeConfig('pointerEnter')).toEqual({
     kind: 'bubbling',
+    handlerName: 'onPointerEnter',
+    captureHandlerName: 'onPointerEnterCapture',
     skipBubbling: true,
-    dispatchConfig: {
-      phasedRegistrationNames: {
-        bubbled: 'onPointerEnter',
-        captured: 'onPointerEnterCapture',
-        skipBubbling: true,
-      },
-    },
   });
 });
 
 test('getEventTypeConfig() returns config of direct event', () => {
-  expect(getEventTypeConfig('layout')).toEqual({
-    kind: 'direct',
-    dispatchConfig: { registrationName: 'onLayout' },
-  });
+  expect(getEventTypeConfig('layout')).toEqual({ kind: 'direct', handlerName: 'onLayout' });
 });
 
 test('getEventTypeConfig() returns null for events unknown to React Native', () => {

src/events/modern/__tests__/event.test.ts

@@ -1,6 +1,10 @@
-import { createEvent, SyntheticEvent } from '../event';
+import { format } from 'pretty-format';
+import type { TestInstance } from 'test-renderer';
 
-const dispatchConfig = { registrationName: 'onFocus' };
+import { createEvent, getEventInternals, SyntheticEvent } from '../event';
+import type { EventTypeConfig } from '../event-types';
+
+const typeConfig: EventTypeConfig = { kind: 'direct', handlerName: 'onFocus' };
 
 afterEach(() => {
   jest.restoreAllMocks();
@@ -10,9 +14,9 @@ test('exposes init values', () => {
   const nativeEvent = { target: 1 };
   const event = new SyntheticEvent(
     'layout',
-    { cancelable: true, rnIsDirect: true, timeStamp: 123 },
+    { cancelable: true, timeStamp: 123 },
     nativeEvent,
-    dispatchConfig,
+    typeConfig,
   );
 
   expect(event.type).toBe('layout');
@@ -21,29 +25,39 @@ test('exposes init values', () => {
   expect(event.rnIsDirect).toBe(true);
   expect(event.timeStamp).toBe(123);
   expect(event.nativeEvent).toBe(nativeEvent);
-  expect(event.dispatchConfig).toBe(dispatchConfig);
+  expect(event.dispatchConfig).toEqual({ registrationName: 'onFocus' });
   expect(event.isTrusted).toBe(true);
 });
 
 test('has no target and phase outside of dispatch', () => {
-  const event = new SyntheticEvent('focus', { bubbles: true }, {}, dispatchConfig);
+  const event = new SyntheticEvent('focus', {}, {}, typeConfig);
 
   expect(event.target).toBeNull();
   expect(event.currentTarget).toBeNull();
   expect(event.eventPhase).toBe(SyntheticEvent.NONE);
   expect(event.composedPath()).toEqual([]);
 });
 
+test('keeps dispatch fields out of printed and compared events', () => {
+  const event = new SyntheticEvent('focus', { timeStamp: 1 }, {}, typeConfig);
+  const target = { type: 'View', props: { testID: 'target' } } as unknown as TestInstance;
+  getEventInternals(event).target = target;
+
+  expect(event.target).toBe(target);
+  expect(event).toEqual(new SyntheticEvent('focus', { timeStamp: 1 }, {}, typeConfig));
+  expect(format(event)).not.toContain('target');
+});
+
 test('defaults timeStamp to performance.now()', () => {
   jest.spyOn(performance, 'now').mockReturnValue(456);
 
-  const event = new SyntheticEvent('focus', {}, {}, dispatchConfig);
+  const event = new SyntheticEvent('focus', {}, {}, typeConfig);
 
   expect(event.timeStamp).toBe(456);
 });
 
 test('preventDefault() marks cancelable event as default prevented', () => {
-  const event = new SyntheticEvent('focus', { cancelable: true }, {}, dispatchConfig);
+  const event = new SyntheticEvent('focus', { cancelable: true }, {}, typeConfig);
 
   event.preventDefault();
 
@@ -52,7 +66,7 @@ test('preventDefault() marks cancelable event as default prevented', () => {
 });
 
 test('preventDefault() does nothing on non-cancelable event', () => {
-  const event = new SyntheticEvent('focus', {}, {}, dispatchConfig);
+  const event = new SyntheticEvent('focus', {}, {}, typeConfig);
 
   event.preventDefault();
 
@@ -63,7 +77,7 @@ test('preventDefault() does nothing on non-cancelable event', () => {
 test.each(['stopPropagation', 'stopImmediatePropagation'] as const)(
   '%s() stops propagation',
   (method) => {
-    const event = new SyntheticEvent('focus', {}, {}, dispatchConfig);
+    const event = new SyntheticEvent('focus', {}, {}, typeConfig);
     expect(event.isPropagationStopped()).toBe(false);
 
     event[method]();
@@ -74,7 +88,7 @@ test.each(['stopPropagation', 'stopImmediatePropagation'] as const)(
 );
 
 test('cancelBubble can only be set to true', () => {
-  const event = new SyntheticEvent('focus', {}, {}, dispatchConfig);
+  const event = new SyntheticEvent('focus', {}, {}, typeConfig);
 
   event.cancelBubble = true;
   event.cancelBubble = false;
@@ -83,13 +97,13 @@ test('cancelBubble can only be set to true', () => {
 });
 
 test('persist() is a no-op', () => {
-  const event = new SyntheticEvent('focus', {}, {}, dispatchConfig);
+  const event = new SyntheticEvent('focus', {}, {}, typeConfig);
 
   expect(() => event.persist()).not.toThrow();
 });
 
 test('defines event phase constants on class and prototype', () => {
-  const event = new SyntheticEvent('focus', {}, {}, dispatchConfig);
+  const event = new SyntheticEvent('focus', {}, {}, typeConfig);
 
   expect([
     SyntheticEvent.NONE,
@@ -126,6 +140,13 @@ describe('createEvent()', () => {
 
     expect(event?.bubbles).toBe(false);
     expect(event?.rnIsDirect).toBe(false);
+    expect(event?.dispatchConfig).toEqual({
+      phasedRegistrationNames: {
+        bubbled: 'onPointerEnter',
+        captured: 'onPointerEnterCapture',
+        skipBubbling: true,
+      },
+    });
   });
 
   test('creates direct event', () => {

src/events/modern/__tests__/fire-event.test.tsx

@@ -4,12 +4,12 @@ import type { TestInstance } from 'test-renderer';
 
 import { render, screen } from '../../..';
 import type { SyntheticEvent } from '../event';
-import type { FireEventInit, FireEventType } from '../fire-event';
+import type { FireEventInit } from '../fire-event';
 import { fireEvent } from '../fire-event';
 
 /** Calls `fireEvent` with arguments its types don't allow, as JavaScript callers can. */
 function fireEventUntyped(instance: TestInstance, eventType: string, ...args: unknown[]) {
-  return fireEvent(instance, eventType as FireEventType, ...(args as [FireEventInit]));
+  return fireEvent(instance, eventType, ...(args as [FireEventInit]));
 }
 
 describe('event object', () => {
@@ -251,16 +251,6 @@ describe('event types unknown to React Native', () => {
     expect(handler).not.toHaveBeenCalled();
   });
 
-  test('are type errors', async () => {
-    await render(<TextInput testID="input" />);
-    const input = screen.getByTestId('input');
-
-    // @ts-expect-error `changeText` isn't dispatched natively.
-    await expect(fireEvent(input, 'changeText', {})).rejects.toThrow();
-    // @ts-expect-error `onChangeText` isn't dispatched natively.
-    await expect(fireEvent(input, 'onChangeText', {})).rejects.toThrow();
-  });
-
   test('throws before checking the event object', async () => {
     await render(<TextInput testID="input" />);