feat: use asyncWrapper for userEvent to prevent act warnings

Author: pierrezimmermannbam

experiments-rtl/src/app/__tests__/click.test.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import * as React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-test("userEvent.click()", async () => {
+test('userEvent.click()', async () => {
   const handleClick = jest.fn();
 
   render(
@@ -11,12 +11,12 @@ test("userEvent.click()", async () => {
     </button>
   );
 
-  const button = screen.getByText("Click");
+  const button = screen.getByText('Click');
   await userEvent.click(button);
   expect(handleClick).toHaveBeenCalledTimes(1);
 });
 
-test("fireEvent.click()", () => {
+test('fireEvent.click()', () => {
   const handleClick = jest.fn();
 
   render(
@@ -25,7 +25,7 @@ test("fireEvent.click()", () => {
     </button>
   );
 
-  const button = screen.getByText("Click");
+  const button = screen.getByText('Click');
   fireEvent.click(button);
   expect(handleClick).toHaveBeenCalledTimes(1);
 });

src/user-event/__tests__/act.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import render from '../../render';
+import { userEvent } from '..';
+import { screen } from '../../screen';
+
+test('user event disables act environmennt', async () => {
+  const consoleErrorSpy = jest.spyOn(console, 'error');
+  jest.useFakeTimers();
+  const TestComponent = () => {
+    const [isVisible, setIsVisible] = React.useState(false);
+
+    React.useEffect(() => {
+      setTimeout(() => {
+        setIsVisible(true);
+      }, 100);
+    }, []);
+
+    return (
+      <>
+        <Pressable testID="pressable" />
+        {isVisible && <Text />}
+      </>
+    );
+  };
+
+  render(<TestComponent />);
+
+  await userEvent.press(screen.getByTestId('pressable'));
+
+  expect(consoleErrorSpy).not.toHaveBeenCalled();
+});

src/user-event/setup/setup.ts

@@ -4,6 +4,8 @@ import { PressOptions, press, longPress } from '../press';
 import { TypeOptions, type } from '../type';
 import { clear } from '../clear';
 import { ScrollToOptions, scrollTo } from '../scroll';
+import { wait } from '../utils';
+import { asyncWrapper } from '../utils/asyncWrapper';
 
 export interface UserEventSetupOptions {
   /**
@@ -143,13 +145,33 @@ function createInstance(config: UserEventConfig): UserEventInstance {
 
   // We need to bind these functions, as they access the config through 'this.config'.
   const api = {
-    press: press.bind(instance),
-    longPress: longPress.bind(instance),
-    type: type.bind(instance),
-    clear: clear.bind(instance),
-    scrollTo: scrollTo.bind(instance),
+    press: wrapAndBindImpl(instance, press),
+    longPress: wrapAndBindImpl(instance, longPress),
+    type: wrapAndBindImpl(instance, type),
+    clear: wrapAndBindImpl(instance, clear),
+    scrollTo: wrapAndBindImpl(instance, scrollTo),
   };
 
   Object.assign(instance, api);
   return instance;
 }
+
+// This implementation is sourced from testing-library/user-event
+// https://github.com/testing-library/user-event/blob/7a305dee9ab833d6f338d567fc2e862b4838b76a/src/setup/setup.ts#L121
+function wrapAndBindImpl<Impl extends (...args: any) => Promise<any>>(
+  instance: UserEventInstance,
+  impl: Impl
+): Impl {
+  const method = ((...args: any[]) => {
+    return asyncWrapper(() =>
+      // eslint-disable-next-line promise/prefer-await-to-then
+      impl.apply(instance, args).then(async (ret) => {
+        await wait(instance.config);
+        return ret;
+      })
+    );
+  }) as Impl;
+
+  Object.defineProperty(method, 'name', { get: () => impl.name });
+  return method;
+}

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

@@ -1,8 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import { Text } from 'react-native';
 import { wait } from '../wait';
-import render from '../../../render';
-import { screen } from '../../../screen';
 
 beforeEach(() => {
   jest.useRealTimers();
@@ -63,31 +59,4 @@ describe('wait()', () => {
       expect(advanceTimers).not.toHaveBeenCalled();
     }
   );
-
-  it('is wrapped by act', async () => {
-    const consoleErrorSpy = jest.spyOn(console, 'error');
-    jest.useFakeTimers();
-    const TestComponent = () => {
-      const [isVisible, setIsVisible] = useState(false);
-
-      useEffect(() => {
-        setTimeout(() => {
-          setIsVisible(true);
-        }, 100);
-      }, []);
-
-      if (isVisible) {
-        return <Text>Visible</Text>;
-      }
-
-      return null;
-    };
-
-    render(<TestComponent />);
-
-    await wait({ delay: 100, advanceTimers: jest.advanceTimersByTime });
-
-    expect(screen.getByText('Visible')).toBeTruthy();
-    expect(consoleErrorSpy).not.toHaveBeenCalled();
-  });
 });

src/waitFor.ts

@@ -1,14 +1,13 @@
 /* globals jest */
-import act, { setReactActEnvironment, getIsReactActEnvironment } from './act';
 import { getConfig } from './config';
-import { flushMicroTasks, flushMicroTasksLegacy } from './flush-micro-tasks';
+import { flushMicroTasks } from './flush-micro-tasks';
 import { ErrorWithStack, copyStackTrace } from './helpers/errors';
 import {
   setTimeout,
   clearTimeout,
   jestFakeTimersAreEnabled,
 } from './helpers/timers';
-import { checkReactVersionAtLeast } from './react-versions';
+import { asyncWrapper } from './user-event/utils/asyncWrapper';
 
 const DEFAULT_INTERVAL = 50;
 
@@ -199,30 +198,7 @@ export default async function waitFor<T>(
   const stackTraceError = new ErrorWithStack('STACK_TRACE_ERROR', waitFor);
   const optionsWithStackTrace = { stackTraceError, ...options };
 
-  if (checkReactVersionAtLeast(18, 0)) {
-    const previousActEnvironment = getIsReactActEnvironment();
-    setReactActEnvironment(false);
-
-    try {
-      const result = await waitForInternal(expectation, optionsWithStackTrace);
-      // Flush the microtask queue before restoring the `act` environment
-      await flushMicroTasksLegacy();
-      return result;
-    } finally {
-      setReactActEnvironment(previousActEnvironment);
-    }
-  }
-
-  if (!checkReactVersionAtLeast(16, 9)) {
-    return waitForInternal(expectation, optionsWithStackTrace);
-  }
-
-  let result: T;
-
-  await act(async () => {
-    result = await waitForInternal(expectation, optionsWithStackTrace);
-  });
-
-  // Either we have result or `waitFor` threw error
-  return result!;
+  return asyncWrapper(() =>
+    waitForInternal(expectation, optionsWithStackTrace)
+  );
 }