Add support for async toWarnDev scope

Author: eps1lon

src/__tests__/render.js

@@ -219,9 +219,9 @@ describe('render API', () => {
     expect(wrapperComponentMountEffect).toHaveBeenCalledTimes(1)
   })
 
-  testGateReact18('legacyRoot uses legacy ReactDOM.render', () => {
-    expect(() => {
-      render(<div />, {legacyRoot: true})
+  testGateReact18('legacyRoot uses legacy ReactDOM.render', async () => {
+    await expect(async () => {
+      await render(<div />, {legacyRoot: true})
     }).toErrorDev(
       [
         "Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
@@ -238,12 +238,12 @@ describe('render API', () => {
     )
   })
 
-  testGateReact18('legacyRoot uses legacy ReactDOM.hydrate', () => {
+  testGateReact18('legacyRoot uses legacy ReactDOM.hydrate', async () => {
     const ui = <div />
     const container = document.createElement('div')
     container.innerHTML = ReactDOMServer.renderToString(ui)
-    expect(() => {
-      render(ui, {container, hydrate: true, legacyRoot: true})
+    await expect(async () => {
+      await render(ui, {container, hydrate: true, legacyRoot: true})
     }).toErrorDev(
       [
         "Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",

src/__tests__/renderHook.js

@@ -67,13 +67,13 @@ test('allows wrapper components', async () => {
   expect(result.current).toEqual('provided')
 })
 
-testGateReact18('legacyRoot uses legacy ReactDOM.render', () => {
+testGateReact18('legacyRoot uses legacy ReactDOM.render', async () => {
   const Context = React.createContext('default')
   function Wrapper({children}) {
     return <Context.Provider value="provided">{children}</Context.Provider>
   }
   let result
-  expect(async () => {
+  await expect(async () => {
     result = (
       await renderHook(
         () => {

tests/toWarnDev.js

@@ -181,11 +181,7 @@ const createMatcherFor = (consoleMethod, matcherName) =>
       // Avoid using Jest's built-in spy since it can't be removed.
       console[consoleMethod] = consoleSpy
 
-      try {
-        callback()
-      } catch (error) {
-        caughtError = error
-      } finally {
+      const onFinally = () => {
         // Restore the unspied method so that unexpected errors fail tests.
         console[consoleMethod] = originalMethod
 
@@ -289,11 +285,56 @@ const createMatcherFor = (consoleMethod, matcherName) =>
 
         return {pass: true}
       }
+
+      let returnPromise = null
+      try {
+        const result = callback()
+
+        if (
+          typeof result === 'object' &&
+          result !== null &&
+          typeof result.then === 'function'
+        ) {
+          // `act` returns a thenable that can't be chained.
+          // Once `act(async () => {}).then(() => {}).then(() => {})` works
+          // we can just return `result.then(onFinally, error => ...)`
+          returnPromise = new Promise((resolve, reject) => {
+            result
+              .then(
+                () => {
+                  resolve(onFinally())
+                },
+                error => {
+                  caughtError = error
+                  return resolve(onFinally())
+                },
+              )
+              // In case onFinally throws we need to reject from this matcher
+              .catch(error => {
+                reject(error)
+              })
+          })
+        }
+      } catch (error) {
+        caughtError = error
+      } finally {
+        return returnPromise === null ? onFinally() : returnPromise
+      }
     } else {
       // Any uncaught errors or warnings should fail tests in production mode.
-      callback()
+      const result = callback()
 
-      return {pass: true}
+      if (
+        typeof result === 'object' &&
+        result !== null &&
+        typeof result.then === 'function'
+      ) {
+        return result.then(() => {
+          return {pass: true}
+        })
+      } else {
+        return {pass: true}
+      }
     }
   }