Codemod act -> await act (4/?)

Similar to the rationale for `waitFor` (see #26285), we should always await the result of an `act` call so that microtasks have a chance to fire. This only affects the internal `act` that we use in our repo, for now. In the public `act` API, we don't yet require this; however, we effectively will for any update that triggers suspense once `use` lands. So we likely will start warning in an upcoming minor.
facebook · Mar 8, 2023 · 6b67a76 · 6b67a76
1 parent 161f6ae
commit 6b67a76
Show file tree

Hide file tree

Showing 17 changed files with 812 additions and 999 deletions.
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -984,7 +984,7 @@ describe('ReactHooksInspectionIntegration', () => {
       children: ['count: ', '1'],
     });
 
-    act(incrementCount);
+    await act(async () => incrementCount());
     expect(renderer.toJSON()).toEqual({
       type: 'div',
       props: {},

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -1069,8 +1069,8 @@ describe('InspectedElement', () => {
     });
 
     async function loadPath(path) {
-      TestUtilsAct(() => {
-        TestRendererAct(() => {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
           inspectElementPath(path);
           jest.runOnlyPendingTimers();
         });
@@ -1224,8 +1224,8 @@ describe('InspectedElement', () => {
     });
 
     async function loadPath(path) {
-      TestUtilsAct(() => {
-        TestRendererAct(() => {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
           inspectElementPath(path);
           jest.runOnlyPendingTimers();
         });
@@ -1306,8 +1306,8 @@ describe('InspectedElement', () => {
     });
 
     async function loadPath(path) {
-      TestUtilsAct(() => {
-        TestRendererAct(() => {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
           inspectElementPath(path);
           jest.runOnlyPendingTimers();
         });
@@ -1375,8 +1375,8 @@ describe('InspectedElement', () => {
       }
     `);
 
-    TestRendererAct(() => {
-      TestUtilsAct(() => {
+    await TestRendererAct(async () => {
+      await TestUtilsAct(async () => {
         legacyRender(
           <Example
             nestedObject={{
@@ -1469,8 +1469,8 @@ describe('InspectedElement', () => {
     });
 
     async function loadPath(path) {
-      TestUtilsAct(() => {
-        TestRendererAct(() => {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
           inspectElementPath(path);
           jest.runOnlyPendingTimers();
         });
@@ -1513,8 +1513,8 @@ describe('InspectedElement', () => {
       }
     `);
 
-    TestRendererAct(() => {
-      TestUtilsAct(() => {
+    await TestRendererAct(async () => {
+      await TestUtilsAct(async () => {
         legacyRender(
           <Example
             nestedObject={{
@@ -1596,8 +1596,8 @@ describe('InspectedElement', () => {
     });
 
     async function loadPath(path) {
-      TestUtilsAct(() => {
-        TestRendererAct(() => {
+      await TestUtilsAct(async () => {
+        await TestRendererAct(async () => {
           inspectElementPath(path);
           jest.runOnlyPendingTimers();
         });
@@ -1618,7 +1618,7 @@ describe('InspectedElement', () => {
       }
     `);
 
-    TestUtilsAct(() => {
+    await TestUtilsAct(async () => {
       legacyRender(
         <Example
           nestedObject={{
@@ -1640,11 +1640,9 @@ describe('InspectedElement', () => {
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       {
         "nestedObject": {
-          "a": {
-            "b": {
-              "value": 2,
-            },
-            "value": 2,
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}, value: 2},
           },
           "value": 2,
         },
@@ -2833,7 +2831,7 @@ describe('InspectedElement', () => {
       };
       const toggleError = async forceError => {
         await withErrorsOrWarningsIgnored(['ErrorBoundary'], async () => {
-          await TestUtilsAct(() => {
+          await TestUtilsAct(async () => {
             bridge.send('overrideError', {
               id: targetErrorBoundaryID,
               rendererID: store.getRendererIDForElement(targetErrorBoundaryID),
@@ -2842,7 +2840,7 @@ describe('InspectedElement', () => {
           });
         });
 
-        TestUtilsAct(() => {
+        await TestUtilsAct(async () => {
           jest.runOnlyPendingTimers();
         });
       };

diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -48,21 +48,16 @@ module.exports = function (initModules) {
   // ====================================
 
   // promisified version of ReactDOM.render()
-  function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
-    return new Promise(resolve => {
-      if (forceHydrate) {
-        act(() => {
-          ReactDOM.hydrate(reactElement, domElement);
-        });
-      } else {
-        act(() => {
-          ReactDOM.render(reactElement, domElement);
-        });
-      }
-      // We can't use the callback for resolution because that will not catch
-      // errors. They're thrown.
-      resolve();
-    });
+  async function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
+    if (forceHydrate) {
+      await act(async () => {
+        ReactDOM.hydrate(reactElement, domElement);
+      });
+    } else {
+      await act(async () => {
+        ReactDOM.render(reactElement, domElement);
+      });
+    }
   }
   // performs fn asynchronously and expects count errors logged to console.error.
   // will fail the test if the count of errors logged is not equal to count.

diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -2520,7 +2520,7 @@ describe('DOMPluginEventSystem', () => {
           });
 
           // @gate www
-          it('beforeblur and afterblur are called after a focused element is suspended', () => {
+          it('beforeblur and afterblur are called after a focused element is suspended', async () => {
             const log = [];
             // We have to persist here because we want to read relatedTarget later.
             const onAfterBlur = jest.fn(e => {
@@ -2575,7 +2575,7 @@ describe('DOMPluginEventSystem', () => {
 
             const root = ReactDOMClient.createRoot(container2);
 
-            act(() => {
+            await act(async () => {
               root.render(<Component />);
             });
             jest.runAllTimers();
@@ -2587,7 +2587,7 @@ describe('DOMPluginEventSystem', () => {
             expect(onAfterBlur).toHaveBeenCalledTimes(0);
 
             suspend = true;
-            act(() => {
+            await act(async () => {
               root.render(<Component />);
             });
             jest.runAllTimers();
@@ -2604,7 +2604,7 @@ describe('DOMPluginEventSystem', () => {
           });
 
           // @gate www
-          it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', () => {
+          it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', async () => {
             const onBeforeBlur = jest.fn();
             const innerRef = React.createRef();
             const innerRef2 = React.createRef();
@@ -2661,7 +2661,7 @@ describe('DOMPluginEventSystem', () => {
 
             const root = ReactDOMClient.createRoot(container2);
 
-            act(() => {
+            await act(async () => {
               root.render(<Component />);
             });
             jest.runAllTimers();
@@ -2672,7 +2672,7 @@ describe('DOMPluginEventSystem', () => {
             expect(onBeforeBlur).toHaveBeenCalledTimes(0);
 
             suspend = true;
-            act(() => {
+            await act(async () => {
               root.render(<Component />);
             });
             jest.runAllTimers();
@@ -2684,17 +2684,17 @@ describe('DOMPluginEventSystem', () => {
           });
 
           // @gate www
-          it('regression: does not fire beforeblur/afterblur if target is already hidden', () => {
+          it('regression: does not fire beforeblur/afterblur if target is already hidden', async () => {
             const Suspense = React.Suspense;
             let suspend = false;
-            const promise = Promise.resolve();
+            const fakePromise = {then() {}};
             const setBeforeBlurHandle =
               ReactDOM.unstable_createEventHandle('beforeblur');
             const innerRef = React.createRef();
 
             function Child() {
               if (suspend) {
-                throw promise;
+                throw fakePromise;
               }
               return <input ref={innerRef} />;
             }
@@ -2726,7 +2726,7 @@ describe('DOMPluginEventSystem', () => {
             document.body.appendChild(container2);
 
             const root = ReactDOMClient.createRoot(container2);
-            act(() => {
+            await act(async () => {
               root.render(<Component />);
             });
 
@@ -2737,7 +2737,7 @@ describe('DOMPluginEventSystem', () => {
 
             // Suspend. This hides the input node, causing it to lose focus.
             suspend = true;
-            act(() => {
+            await act(async () => {
               root.render(<Component />);
             });