Manual fixes

Author: eps1lon

src/__tests__/act.js

@@ -5,23 +5,23 @@ beforeEach(() => {
   global.IS_REACT_ACT_ENVIRONMENT = true
 })
 
-test('render calls useEffect immediately', () => {
+test('render calls useEffect immediately', async () => {
   const effectCb = jest.fn()
   function MyUselessComponent() {
     React.useEffect(effectCb)
     return null
   }
-  render(<MyUselessComponent />)
+  await render(<MyUselessComponent />)
   expect(effectCb).toHaveBeenCalledTimes(1)
 })
 
 test('findByTestId returns the element', async () => {
   const ref = React.createRef()
-  render(<div ref={ref} data-testid="foo" />)
+  await render(<div ref={ref} data-testid="foo" />)
   expect(await screen.findByTestId('foo')).toBe(ref.current)
 })
 
-test('fireEvent triggers useEffect calls', () => {
+test('fireEvent triggers useEffect calls', async () => {
   const effectCb = jest.fn()
   function Counter() {
     React.useEffect(effectCb)
@@ -30,32 +30,33 @@ test('fireEvent triggers useEffect calls', () => {
   }
   const {
     container: {firstChild: buttonNode},
-  } = render(<Counter />)
+  } = await render(<Counter />)
 
   effectCb.mockClear()
-  fireEvent.click(buttonNode)
+  // eslint-disable-next-line testing-library/no-await-sync-events --  TODO: Remove lint rule.
+  await fireEvent.click(buttonNode)
   expect(buttonNode).toHaveTextContent('1')
   expect(effectCb).toHaveBeenCalledTimes(1)
 })
 
-test('calls to hydrate will run useEffects', () => {
+test('calls to hydrate will run useEffects', async () => {
   const effectCb = jest.fn()
   function MyUselessComponent() {
     React.useEffect(effectCb)
     return null
   }
-  render(<MyUselessComponent />, {hydrate: true})
+  await render(<MyUselessComponent />, {hydrate: true})
   expect(effectCb).toHaveBeenCalledTimes(1)
 })
 
-test('cleans up IS_REACT_ACT_ENVIRONMENT if its callback throws', () => {
+test('cleans up IS_REACT_ACT_ENVIRONMENT if its callback throws', async () => {
   global.IS_REACT_ACT_ENVIRONMENT = false
 
-  expect(() =>
+  await expect(() =>
     act(() => {
       throw new Error('threw')
     }),
-  ).toThrow('threw')
+  ).rejects.toThrow('threw')
 
   expect(global.IS_REACT_ACT_ENVIRONMENT).toEqual(false)
 })

src/act-compat.js

@@ -31,55 +31,22 @@ function getIsReactActEnvironment() {
   return getGlobalThis().IS_REACT_ACT_ENVIRONMENT
 }
 
-function withGlobalActEnvironment(actImplementation) {
-  return callback => {
-    const previousActEnvironment = getIsReactActEnvironment()
-    setIsReactActEnvironment(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 => {
-                setIsReactActEnvironment(previousActEnvironment)
-                resolve(returnValue)
-              },
-              error => {
-                setIsReactActEnvironment(previousActEnvironment)
-                reject(error)
-              },
-            )
-          },
-        }
-      } else {
-        setIsReactActEnvironment(previousActEnvironment)
-        return actResult
-      }
-    } catch (error) {
-      // Can't be a `finally {}` block since we don't know if we have to immediately restore IS_REACT_ACT_ENVIRONMENT
-      // or if we have to await the callback first.
-      setIsReactActEnvironment(previousActEnvironment)
-      throw error
-    }
+async function act(scope) {
+  const previousActEnvironment = getIsReactActEnvironment()
+  setIsReactActEnvironment(true)
+  try {
+    // scope passed to domAct needs to be `async` until React.act treats every scope as async.
+    // We already enforce `await act()` (regardless of scope) to flush microtasks
+    // inside the act scope.
+    const result = await domAct(async () => {
+      return scope()
+    })
+    return result
+  } finally {
+    setIsReactActEnvironment(previousActEnvironment)
   }
 }
 
-const act = withGlobalActEnvironment(domAct)
-
 export default act
 export {
   setIsReactActEnvironment as setReactActEnvironment,

src/index.js

@@ -10,15 +10,15 @@ if (typeof process === 'undefined' || !process.env?.RTL_SKIP_AUTO_CLEANUP) {
   // ignore teardown() in code coverage because Jest does not support it
   /* istanbul ignore else */
   if (typeof afterEach === 'function') {
-    afterEach(() => {
-      cleanup()
+    afterEach(async () => {
+      await cleanup()
     })
   } else if (typeof teardown === 'function') {
     // Block is guarded by `typeof` check.
     // eslint does not support `typeof` guards.
     // eslint-disable-next-line no-undef
-    teardown(() => {
-      cleanup()
+    teardown(async () => {
+      await cleanup()
     })
   }
 

src/pure.js

@@ -57,11 +57,7 @@ configureDTL({
     }
   },
   eventWrapper: cb => {
-    let result
-    act(() => {
-      result = cb()
-    })
-    return result
+    return act(cb)
   },
 })
 
@@ -76,13 +72,13 @@ const mountedContainers = new Set()
  */
 const mountedRootEntries = []
 
-function createConcurrentRoot(
+async function createConcurrentRoot(
   container,
   {hydrate, ui, wrapper: WrapperComponent},
 ) {
   let root
   if (hydrate) {
-    act(() => {
+    await act(() => {
       root = ReactDOMClient.hydrateRoot(
         container,
         WrapperComponent ? React.createElement(WrapperComponent, null, ui) : ui,
@@ -103,29 +99,39 @@ function createConcurrentRoot(
       // Nothing to do since hydration happens when creating the root object.
     },
     render(element) {
-      root.render(element)
+      return act(() => {
+        root.render(element)
+      })
     },
     unmount() {
-      root.unmount()
+      return act(() => {
+        root.unmount()
+      })
     },
   }
 }
 
-function createLegacyRoot(container) {
+async function createLegacyRoot(container) {
   return {
     hydrate(element) {
-      ReactDOM.hydrate(element, container)
+      return act(() => {
+        ReactDOM.hydrate(element, container)
+      })
     },
     render(element) {
-      ReactDOM.render(element, container)
+      return act(() => {
+        ReactDOM.render(element, container)
+      })
     },
     unmount() {
-      ReactDOM.unmountComponentAtNode(container)
+      return act(() => {
+        ReactDOM.unmountComponentAtNode(container)
+      })
     },
   }
 }
 
-function renderRoot(
+async function renderRoot(
   ui,
   {baseElement, container, hydrate, queries, root, wrapper: WrapperComponent},
 ) {
@@ -134,13 +140,11 @@ function renderRoot(
       ? React.createElement(WrapperComponent, null, innerElement)
       : innerElement
 
-  act(() => {
-    if (hydrate) {
-      root.hydrate(wrapUiIfNeeded(ui), container)
-    } else {
-      root.render(wrapUiIfNeeded(ui), container)
-    }
-  })
+  if (hydrate) {
+    await root.hydrate(wrapUiIfNeeded(ui), container)
+  } else {
+    await root.render(wrapUiIfNeeded(ui), container)
+  }
 
   return {
     container,
@@ -152,12 +156,10 @@ function renderRoot(
         : // eslint-disable-next-line no-console,
           console.log(prettyDOM(el, maxLength, options)),
     unmount: () => {
-      act(() => {
-        root.unmount()
-      })
+      return root.unmount()
     },
-    rerender: rerenderUi => {
-      renderRoot(wrapUiIfNeeded(rerenderUi), {
+    rerender: async rerenderUi => {
+      await renderRoot(wrapUiIfNeeded(rerenderUi), {
         container,
         baseElement,
         root,
@@ -181,7 +183,7 @@ function renderRoot(
   }
 }
 
-function render(
+async function render(
   ui,
   {
     container,
@@ -205,7 +207,7 @@ function render(
   // eslint-disable-next-line no-negated-condition -- we want to map the evolution of this over time. The root is created first. Only later is it re-used so we don't want to read the case that happens later first.
   if (!mountedContainers.has(container)) {
     const createRootImpl = legacyRoot ? createLegacyRoot : createConcurrentRoot
-    root = createRootImpl(container, {hydrate, ui, wrapper})
+    root = await createRootImpl(container, {hydrate, ui, wrapper})
 
     mountedRootEntries.push({container, root})
     // we'll add it to the mounted containers regardless of whether it's actually
@@ -233,20 +235,22 @@ function render(
   })
 }
 
-function cleanup() {
-  mountedRootEntries.forEach(({root, container}) => {
-    act(() => {
-      root.unmount()
-    })
-    if (container.parentNode === document.body) {
-      document.body.removeChild(container)
-    }
-  })
+async function cleanup() {
+  await Promise.all(
+    mountedRootEntries.map(async ({root, container}) => {
+      await act(() => {
+        root.unmount()
+      })
+      if (container.parentNode === document.body) {
+        document.body.removeChild(container)
+      }
+    }),
+  )
   mountedRootEntries.length = 0
   mountedContainers.clear()
 }
 
-function renderHook(renderCallback, options = {}) {
+async function renderHook(renderCallback, options = {}) {
   const {initialProps, ...renderOptions} = options
   const result = React.createRef()
 
@@ -260,7 +264,7 @@ function renderHook(renderCallback, options = {}) {
     return null
   }
 
-  const {rerender: baseRerender, unmount} = render(
+  const {rerender: baseRerender, unmount} = await render(
     <TestComponent renderCallbackProps={initialProps} />,
     renderOptions,
   )