update user event

Author: mdjastrzebski

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "labelledby",
+    "Pressability",
     "Pressable",
     "redent",
     "RNTL",

src/user-event/clear.ts

@@ -22,15 +22,15 @@ export async function clear(this: UserEventInstance, element: ReactTestInstance)
   }
 
   // 1. Enter element
-  dispatchEvent(element, 'focus', EventBuilder.Common.focus());
+  await dispatchEvent(element, 'focus', EventBuilder.Common.focus());
 
   // 2. Select all
   const textToClear = getTextInputValue(element);
   const selectionRange = {
     start: 0,
     end: textToClear.length,
   };
-  dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(selectionRange));
+  await dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(selectionRange));
 
   // 3. Press backspace with selected text
   const emptyText = '';
@@ -42,6 +42,6 @@ export async function clear(this: UserEventInstance, element: ReactTestInstance)
 
   // 4. Exit element
   await wait(this.config);
-  dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(emptyText));
-  dispatchEvent(element, 'blur', EventBuilder.Common.blur());
+  await dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(emptyText));
+  await dispatchEvent(element, 'blur', EventBuilder.Common.blur());
 }

src/user-event/paste.ts

@@ -26,27 +26,27 @@ export async function paste(
   }
 
   // 1. Enter element
-  dispatchEvent(element, 'focus', EventBuilder.Common.focus());
+  await dispatchEvent(element, 'focus', EventBuilder.Common.focus());
 
   // 2. Select all
   const textToClear = getTextInputValue(element);
   const rangeToClear = { start: 0, end: textToClear.length };
-  dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeToClear));
+  await dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeToClear));
 
   // 3. Paste the text
   nativeState.valueForElement.set(element, text);
-  dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
-  dispatchEvent(element, 'changeText', text);
+  await dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
+  await dispatchEvent(element, 'changeText', text);
 
   const rangeAfter = { start: text.length, end: text.length };
-  dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeAfter));
+  await dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(rangeAfter));
 
   // According to the docs only multiline TextInput emits contentSizeChange event
   // @see: https://reactnative.dev/docs/textinput#oncontentsizechange
   const isMultiline = element.props.multiline === true;
   if (isMultiline) {
     const contentSize = getTextContentSize(text);
-    dispatchEvent(
+    await dispatchEvent(
       element,
       'contentSizeChange',
       EventBuilder.TextInput.contentSizeChange(contentSize),
@@ -55,6 +55,6 @@ export async function paste(
 
   // 4. Exit element
   await wait(this.config);
-  dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(text));
-  dispatchEvent(element, 'blur', EventBuilder.Common.blur());
+  await dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(text));
+  await dispatchEvent(element, 'blur', EventBuilder.Common.blur());
 }

src/user-event/press/press.ts

@@ -118,23 +118,23 @@ async function emitDirectPressEvents(
   options: BasePressOptions,
 ) {
   await wait(config);
-  dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
+  await dispatchEvent(element, 'pressIn', 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());
+    await dispatchEvent(element, 'longPress', EventBuilder.Common.touch());
   }
 
-  dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
+  await 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());
+    await dispatchEvent(element, 'press', EventBuilder.Common.touch());
   }
 }
 
@@ -145,12 +145,12 @@ async function emitPressabilityPressEvents(
 ) {
   await wait(config);
 
-  dispatchEvent(element, 'responderGrant', EventBuilder.Common.responderGrant());
+  await dispatchEvent(element, 'responderGrant', EventBuilder.Common.responderGrant());
 
   const duration = options.duration ?? DEFAULT_MIN_PRESS_DURATION;
   await wait(config, duration);
 
-  dispatchEvent(element, 'responderRelease', EventBuilder.Common.responderRelease());
+  await 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

src/user-event/scroll/scroll-to.ts

@@ -50,7 +50,7 @@ export async function scrollTo(
 
   ensureScrollViewDirection(element, options);
 
-  dispatchEvent(
+  await dispatchEvent(
     element,
     'contentSizeChange',
     options.contentSize?.width ?? 0,
@@ -88,7 +88,7 @@ async function emitDragScrollEvents(
   }
 
   await wait(config);
-  dispatchEvent(
+  await dispatchEvent(
     element,
     'scrollBeginDrag',
     EventBuilder.ScrollView.scroll(scrollSteps[0], scrollOptions),
@@ -99,12 +99,12 @@ async function emitDragScrollEvents(
   // See: https://github.com/callstack/react-native-testing-library/wiki/ScrollView-Events
   for (let i = 1; i < scrollSteps.length - 1; i += 1) {
     await wait(config);
-    dispatchEvent(element, 'scroll', EventBuilder.ScrollView.scroll(scrollSteps[i], scrollOptions));
+    await dispatchEvent(element, 'scroll', EventBuilder.ScrollView.scroll(scrollSteps[i], scrollOptions));
   }
 
   await wait(config);
   const lastStep = scrollSteps.at(-1);
-  dispatchEvent(element, 'scrollEndDrag', EventBuilder.ScrollView.scroll(lastStep, scrollOptions));
+  await dispatchEvent(element, 'scrollEndDrag', EventBuilder.ScrollView.scroll(lastStep, scrollOptions));
 }
 
 async function emitMomentumScrollEvents(
@@ -118,7 +118,7 @@ async function emitMomentumScrollEvents(
   }
 
   await wait(config);
-  dispatchEvent(
+  await dispatchEvent(
     element,
     'momentumScrollBegin',
     EventBuilder.ScrollView.scroll(scrollSteps[0], scrollOptions),
@@ -129,12 +129,12 @@ async function emitMomentumScrollEvents(
   // See: https://github.com/callstack/react-native-testing-library/wiki/ScrollView-Events
   for (let i = 1; i < scrollSteps.length; i += 1) {
     await wait(config);
-    dispatchEvent(element, 'scroll', EventBuilder.ScrollView.scroll(scrollSteps[i], scrollOptions));
+    await dispatchEvent(element, 'scroll', EventBuilder.ScrollView.scroll(scrollSteps[i], scrollOptions));
   }
 
   await wait(config);
   const lastStep = scrollSteps.at(-1);
-  dispatchEvent(
+  await dispatchEvent(
     element,
     'momentumScrollEnd',
     EventBuilder.ScrollView.scroll(lastStep, scrollOptions),

src/user-event/type/type.ts

@@ -37,14 +37,14 @@ export async function type(
   const keys = parseKeys(text);
 
   if (!options?.skipPress) {
-    dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
+    await dispatchEvent(element, 'pressIn', EventBuilder.Common.touch());
   }
 
-  dispatchEvent(element, 'focus', EventBuilder.Common.focus());
+  await dispatchEvent(element, 'focus', EventBuilder.Common.focus());
 
   if (!options?.skipPress) {
     await wait(this.config);
-    dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
+    await dispatchEvent(element, 'pressOut', EventBuilder.Common.touch());
   }
 
   let currentText = getTextInputValue(element);
@@ -66,12 +66,12 @@ export async function type(
   await wait(this.config);
 
   if (options?.submitEditing) {
-    dispatchEvent(element, 'submitEditing', EventBuilder.TextInput.submitEditing(finalText));
+    await dispatchEvent(element, 'submitEditing', EventBuilder.TextInput.submitEditing(finalText));
   }
 
   if (!options?.skipBlur) {
-    dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText));
-    dispatchEvent(element, 'blur', EventBuilder.Common.blur());
+    await dispatchEvent(element, 'endEditing', EventBuilder.TextInput.endEditing(finalText));
+    await dispatchEvent(element, 'blur', EventBuilder.Common.blur());
   }
 }
 
@@ -89,7 +89,7 @@ export async function emitTypingEvents(
   const isMultiline = element.props.multiline === true;
 
   await wait(config);
-  dispatchEvent(element, 'keyPress', EventBuilder.TextInput.keyPress(key));
+  await dispatchEvent(element, 'keyPress', EventBuilder.TextInput.keyPress(key));
 
   // Platform difference (based on experiments):
   // - iOS and RN Web: TextInput emits only `keyPress` event when max length has been reached
@@ -99,20 +99,20 @@ export async function emitTypingEvents(
   }
 
   nativeState.valueForElement.set(element, text);
-  dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
-  dispatchEvent(element, 'changeText', text);
+  await dispatchEvent(element, 'change', EventBuilder.TextInput.change(text));
+  await dispatchEvent(element, 'changeText', text);
 
   const selectionRange = {
     start: text.length,
     end: text.length,
   };
-  dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(selectionRange));
+  await dispatchEvent(element, 'selectionChange', EventBuilder.TextInput.selectionChange(selectionRange));
 
   // According to the docs only multiline TextInput emits contentSizeChange event
   // @see: https://reactnative.dev/docs/textinput#oncontentsizechange
   if (isMultiline) {
     const contentSize = getTextContentSize(text);
-    dispatchEvent(
+    await dispatchEvent(
       element,
       'contentSizeChange',
       EventBuilder.TextInput.contentSizeChange(contentSize),

src/user-event/utils/__tests__/dispatch-event.test.tsx

@@ -8,33 +8,35 @@ import { dispatchEvent } from '../dispatch-event';
 const TOUCH_EVENT = EventBuilder.Common.touch();
 
 describe('dispatchEvent', () => {
-  it('does dispatch event', () => {
+  it('does dispatch event', async () => {
     const onPress = jest.fn();
     render(<Text testID="text" onPress={onPress} />);
 
-    dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT);
+    await dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT);
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 
-  it('does not dispatch event to parent host component', () => {
+  it('does not dispatch event to parent host component', async () => {
     const onPressParent = jest.fn();
     render(
       <Text onPress={onPressParent}>
         <Text testID="text" />
       </Text>,
     );
 
-    dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT);
+    await dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT);
     expect(onPressParent).not.toHaveBeenCalled();
   });
 
-  it('does NOT throw if no handler found', () => {
+  it('does NOT throw if no handler found', async () => {
     render(
       <Text>
         <Text testID="text" />
       </Text>,
     );
 
-    expect(() => dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT)).not.toThrow();
+    await expect(
+      dispatchEvent(screen.getByTestId('text'), 'press', TOUCH_EVENT),
+    ).resolves.not.toThrow();
   });
 });

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

@@ -11,7 +11,7 @@ import { isElementMounted } from '../../helpers/component-tree';
  * @param eventName name of the event
  * @param event event payload(s)
  */
-export function dispatchEvent(element: ReactTestInstance, eventName: string, ...event: unknown[]) {
+export async function dispatchEvent(element: ReactTestInstance, eventName: string, ...event: unknown[]) {
   if (!isElementMounted(element)) {
     return;
   }
@@ -21,8 +21,8 @@ export function dispatchEvent(element: ReactTestInstance, eventName: string, ...
     return;
   }
 
-  // This will be called synchronously.
-  void act(() => {
-    handler(...event);
+  // React 19 support: use async act
+  await act(async () => { 
+    handler(...event)
   });
 }