act should work without mock Scheduler

Currently, in a React 18 root, `act` only works if you mock the
Scheduler package. This was because we didn't want to add additional
checks at runtime.

But now that the `act` testing API is dev-only, we can simplify its
implementation.

Now when an update is wrapped with `act`, React will bypass Scheduler
entirely and push its tasks onto a special internal queue. Then, when
the outermost `act` scope exists, we'll flush that queue.

I also removed the "wrong act" warning, because the plan is to move
`act` to an isomorphic entry point, simlar to `startTransition`. That's
not directly related to this PR, but I didn't want to bother
re-implementing that warning only to immediately remove it.

I'll add the isomorphic API in a follow up.

Note that the internal version of `act` that we use in our own tests
still depends on mocking the Scheduler package, because it needs to work
in production. I'm planning to move that implementation to a shared
(internal) module, too.

Author: acdlite

packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js

@@ -33,7 +33,7 @@ describe('ReactDOMTestSelectors', () => {
     React = require('react');
 
     const ReactDOM = require('react-dom/testing');
-    act = ReactDOM.act;
+    act = React.unstable_act;
     createComponentSelector = ReactDOM.createComponentSelector;
     createHasPseudoClassSelector = ReactDOM.createHasPseudoClassSelector;
     createRoleSelector = ReactDOM.createRoleSelector;

packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js

@@ -354,32 +354,6 @@ function runActTests(label, render, unmount, rerender) {
           expect(container.innerHTML).toBe('2');
         });
       });
-
-      // @gate __DEV__
-      it('warns if you return a value inside act', () => {
-        expect(() => act(() => null)).toErrorDev(
-          [
-            'The callback passed to act(...) function must return undefined, or a Promise.',
-          ],
-          {withoutStack: true},
-        );
-        expect(() => act(() => 123)).toErrorDev(
-          [
-            'The callback passed to act(...) function must return undefined, or a Promise.',
-          ],
-          {withoutStack: true},
-        );
-      });
-
-      // @gate __DEV__
-      it('warns if you try to await a sync .act call', () => {
-        expect(() => act(() => {}).then(() => {})).toErrorDev(
-          [
-            'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
-          ],
-          {withoutStack: true},
-        );
-      });
     });
 
     describe('asynchronous tests', () => {
@@ -401,15 +375,17 @@ function runActTests(label, render, unmount, rerender) {
 
         await act(async () => {
           render(<App />, container);
-          // flush a little to start the timer
-          expect(Scheduler).toFlushAndYield([]);
+        });
+        expect(container.innerHTML).toBe('0');
+        // Flush the pending timers
+        await act(async () => {
           await sleep(100);
         });
         expect(container.innerHTML).toBe('1');
       });
 
       // @gate __DEV__
-      it('flushes microtasks before exiting', async () => {
+      it('flushes microtasks before exiting (async function)', async () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
           async function someAsyncFunction() {
@@ -431,6 +407,31 @@ function runActTests(label, render, unmount, rerender) {
         expect(container.innerHTML).toEqual('1');
       });
 
+      // @gate __DEV__
+      it('flushes microtasks before exiting (sync function)', async () => {
+        // Same as previous test, but the callback passed to `act` is not itself
+        // an async function.
+        function App() {
+          const [ctr, setCtr] = React.useState(0);
+          async function someAsyncFunction() {
+            // queue a bunch of promises to be sure they all flush
+            await null;
+            await null;
+            await null;
+            setCtr(1);
+          }
+          React.useEffect(() => {
+            someAsyncFunction();
+          }, []);
+          return ctr;
+        }
+
+        await act(() => {
+          render(<App />, container);
+        });
+        expect(container.innerHTML).toEqual('1');
+      });
+
       // @gate __DEV__
       it('warns if you do not await an act call', async () => {
         spyOnDevAndProd(console, 'error');
@@ -461,7 +462,13 @@ function runActTests(label, render, unmount, rerender) {
 
         await sleep(150);
         if (__DEV__) {
-          expect(console.error).toHaveBeenCalledTimes(1);
+          expect(console.error).toHaveBeenCalledTimes(2);
+          expect(console.error.calls.argsFor(0)[0]).toMatch(
+            'You seem to have overlapping act() calls',
+          );
+          expect(console.error.calls.argsFor(1)[0]).toMatch(
+            'You seem to have overlapping act() calls',
+          );
         }
       });
 

packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js

@@ -29,7 +29,6 @@ import {
   flushControlled,
   injectIntoDevTools,
   IsThisRendererActing,
-  act,
   attemptSynchronousHydration,
   attemptDiscreteHydration,
   attemptContinuousHydration,
@@ -163,8 +162,8 @@ const Internals = {
     getFiberCurrentPropsFromNode,
     enqueueStateRestore,
     restoreStateIfNeeded,
+    batchedUpdates,
   ],
-  act,
   // TODO: Temporary. Only used by our internal version of `act. Will remove.
   IsThisRendererActing,
 };

packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js

@@ -34,8 +34,14 @@ const getNodeFromInstance = EventInternals[1];
 const getFiberCurrentPropsFromNode = EventInternals[2];
 const enqueueStateRestore = EventInternals[3];
 const restoreStateIfNeeded = EventInternals[4];
+const batchedUpdates = EventInternals[5];
 
-const act = SecretInternals.act;
+const act_notBatchedInLegacyMode = React.unstable_act;
+function act(callback) {
+  return act_notBatchedInLegacyMode(() => {
+    return batchedUpdates(callback);
+  });
+}
 
 function Event(suffix) {}
 

packages/react-dom/src/client/ReactDOM.js

@@ -20,14 +20,16 @@ const IsThisRendererActing = SecretInternals.IsThisRendererActing;
 
 const batchedUpdates = ReactDOM.unstable_batchedUpdates;
 
-const {IsSomeRendererActing} = ReactSharedInternals;
+const {IsSomeRendererActing, ReactCurrentActQueue} = ReactSharedInternals;
 
 // This version of `act` is only used by our tests. Unlike the public version
 // of `act`, it's designed to work identically in both production and
 // development. It may have slightly different behavior from the public
 // version, too, since our constraints in our test suite are not the same as
 // those of developers using React — we're testing React itself, as opposed to
 // building an app with React.
+// TODO: Replace the internal "concurrent" implementations of `act` with a
+// single shared module.
 
 let actingUpdatesScopeDepth = 0;
 
@@ -50,8 +52,14 @@ export function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
   IsSomeRendererActing.current = true;
   IsThisRendererActing.current = true;
   actingUpdatesScopeDepth++;
+  if (__DEV__ && actingUpdatesScopeDepth === 1) {
+    ReactCurrentActQueue.disableActWarning = true;
+  }
 
   const unwind = () => {
+    if (__DEV__ && actingUpdatesScopeDepth === 1) {
+      ReactCurrentActQueue.disableActWarning = false;
+    }
     actingUpdatesScopeDepth--;
     IsSomeRendererActing.current = previousIsSomeRendererActing;
     IsThisRendererActing.current = previousIsThisRendererActing;

packages/react-dom/src/test-utils/ReactTestUtils.js

@@ -9,7 +9,6 @@
 
 export * from './index.classic.fb.js';
 export {
-  act,
   createComponentSelector,
   createHasPseudoClassSelector,
   createRoleSelector,

packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js

@@ -8,4 +8,3 @@
  */
 
 export * from './index.experimental.js';
-export {act} from 'react-reconciler/src/ReactFiberReconciler';

packages/react-dom/testing.classic.fb.js

@@ -9,7 +9,6 @@
 
 export * from './index.js';
 export {
-  act,
   createComponentSelector,
   createHasPseudoClassSelector,
   createRoleSelector,