fix: Don't trigger "missing act" warnings when using waitFor+real timers

Author: eps1lon

src/__tests__/end-to-end.js

@@ -17,8 +17,6 @@ function ComponentWithLoader() {
     let cancelled = false
     fetchAMessage().then(data => {
       if (!cancelled) {
-        // Will trigger "missing act" warnings in React 18 with real timers
-        // Need to wait for an action on https://github.com/reactwg/react-18/discussions/23#discussioncomment-1087897
         setState({data, loading: false})
       }
     })

src/act-compat.js

@@ -15,7 +15,73 @@ function actPolyfill(cb) {
   ReactDOM.render(<div />, document.createElement('div'))
 }
 
-const act = isomorphicAct || domAct || actPolyfill
+function getGlobalThis() {
+  if (typeof self !== 'undefined') {
+    return self
+  }
+  if (typeof window !== 'undefined') {
+    return window
+  }
+  if (typeof global !== 'undefined') {
+    return global
+  }
+  throw new Error('unable to locate global object')
+}
+
+function setReactActEnvironment(isReactActEnvironment) {
+  getGlobalThis().IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment
+}
+
+function getIsReactActEnvironment() {
+  return getGlobalThis().IS_REACT_ACT_ENVIRONMENT
+}
+
+function withGlobalActEnvironment(actImplementation) {
+  return callback => {
+    const previousActEnvironment = getIsReactActEnvironment()
+    setReactActEnvironment(true)
+    try {
+      // The return value of `act` is always a thenable.
+      let callbackNeedsToBeAwaited = false
+      const actResult = actImplementation(() => {
+        const result = callback()
+        if (
+          result !== null &&
+          typeof result === 'object' &&
+          typeof result.then === 'function'
+        ) {
+          callbackNeedsToBeAwaited = true
+        }
+        return result
+      })
+      if (callbackNeedsToBeAwaited) {
+        const thenable = actResult
+        return {
+          then: (resolve, reject) => {
+            thenable.then(
+              returnValue => {
+                setReactActEnvironment(previousActEnvironment)
+                resolve(returnValue)
+              },
+              error => {
+                setReactActEnvironment(previousActEnvironment)
+                reject(error)
+              },
+            )
+          },
+        }
+      } else {
+        setReactActEnvironment(previousActEnvironment)
+        return actResult
+      }
+    } catch (error) {
+      setReactActEnvironment(previousActEnvironment)
+      throw error
+    }
+  }
+}
+
+const act = withGlobalActEnvironment(isomorphicAct || domAct || actPolyfill)
 
 let youHaveBeenWarned = false
 let isAsyncActSupported = null
@@ -131,6 +197,6 @@ function asyncAct(cb) {
 }
 
 export default act
-export {asyncAct}
+export {asyncAct, setReactActEnvironment, getIsReactActEnvironment}
 
 /* eslint no-console:0 */

src/pure.js

@@ -5,7 +5,11 @@ import {
   prettyDOM,
   configure as configureDTL,
 } from '@testing-library/dom'
-import act, {asyncAct} from './act-compat'
+import act, {
+  asyncAct,
+  getIsReactActEnvironment,
+  setReactActEnvironment,
+} from './act-compat'
 import {fireEvent} from './fire-event'
 
 configureDTL({
@@ -30,7 +34,18 @@ if (React.startTransition !== undefined) {
     unstable_advanceTimersWrapper: cb => {
       return act(cb)
     },
-    asyncWrapper: cb => cb(),
+    // We just want to run `waitFor` without IS_REACT_ACT_ENVIRONMENT
+    // But that's not necessarily how `asyncWrapper` is used since it's a public method.
+    // Let's just hope nobody else is using it.
+    asyncWrapper: async cb => {
+      const previousActEnvironment = getIsReactActEnvironment()
+      setReactActEnvironment(false)
+      try {
+        return await cb()
+      } finally {
+        setReactActEnvironment(previousActEnvironment)
+      }
+    },
   })
 }
 

tests/setup-env.js

@@ -1 +1,9 @@
 import '@testing-library/jest-dom/extend-expect'
+
+beforeEach(() => {
+  global.IS_REACT_ACT_ENVIRONMENT = true
+})
+
+afterEach(() => {
+  global.IS_REACT_ACT_ENVIRONMENT = false
+})