act() - s / flushPassiveEffects / Scheduler.unstable_flushWithoutYielding

fixtures/dom/.gitignore

@@ -8,6 +8,8 @@ coverage
 
 # production
 build
+public/scheduler-unstable_mock.development.js
+public/scheduler-unstable_mock.production.min.js
 public/react.development.js
 public/react.production.min.js
 public/react-dom.development.js

fixtures/dom/package.json

@@ -18,7 +18,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "prestart": "cp ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.development.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js public/",
+    "prestart": "cp ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.development.js ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.production.min.js ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.development.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js public/",
     "build": "react-scripts build && cp build/index.html build/200.html",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

fixtures/dom/public/act-dom.html

@@ -7,7 +7,11 @@
   this page tests whether act runs properly in a browser.
   <br/>
   your console should say "5"
+  <script src='scheduler-unstable_mock.development.js'></script>
   <script src='react.development.js'></script>
+  <script type="text/javascript">    
+    window.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler = window.SchedulerMock
+  </script>
   <script src='react-dom.development.js'></script>
   <script src='react-dom-test-utils.development.js'></script>
   <script>

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

@@ -503,4 +503,23 @@ describe('ReactTestUtils.act()', () => {
       });
     }
   });
+  describe('concurrent mode', () => {
+    it('flushes renders', () => {
+      function App() {
+        let [state, setState] = React.useState(0);
+        React.useEffect(
+          () => {
+            setState(x => x + 1);
+          },
+          [Math.min(state, 4)],
+        );
+        return state;
+      }
+      const el = document.createElement('div');
+      act(() => {
+        ReactDOM.unstable_createRoot(el).render(<App />);
+      });
+      expect(el.innerHTML).toBe('5');
+    });
+  });
 });

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

@@ -13,6 +13,7 @@ import warningWithoutStack from 'shared/warningWithoutStack';
 import ReactDOM from 'react-dom';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
+import * as Scheduler from 'scheduler';
 
 // Keep in sync with ReactDOMUnstableNativeDependencies.js
 // ReactDOM.js, and ReactTestUtils.js:
@@ -40,16 +41,32 @@ const {ReactShouldWarnActingUpdates} = ReactSharedInternals;
 // this implementation should be exactly the same in
 // ReactTestUtilsAct.js, ReactTestRendererAct.js, createReactNoop.js
 
-// we track the 'depth' of the act() calls with this counter,
-// so we can tell if any async act() calls try to run in parallel.
-let actingUpdatesScopeDepth = 0;
+let hasWarnedAboutMissingMockScheduler = false;
+const flushWork =
+  Scheduler.unstable_flushWithoutYielding ||
+  function() {
+    if (hasWarnedAboutMissingMockScheduler === false) {
+      warningWithoutStack(
+        null,
+        'Starting from React v17, the "scheduler" module will need to be mocked ' +
+          'to guarantee consistent behaviour across tests and browsers. To fix this, add the following ' +
+          "to the top of your tests, or in your framework's global config file -\n\n" +
+          'As an example, for jest - \n' +
+          "jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));\n\n" +
+          'For more info, visit https://fb.me/react-mock-scheduler',
+      );
+      hasWarnedAboutMissingMockScheduler = true;
+    }
 
-function flushEffectsAndMicroTasks(onDone: (err: ?Error) => void) {
+    while (flushPassiveEffects()) {}
+  };
+
+function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
   try {
-    flushPassiveEffects();
+    flushWork();
     enqueueTask(() => {
-      if (flushPassiveEffects()) {
-        flushEffectsAndMicroTasks(onDone);
+      if (flushWork()) {
+        flushWorkAndMicroTasks(onDone);
       } else {
         onDone();
       }
@@ -59,6 +76,11 @@ function flushEffectsAndMicroTasks(onDone: (err: ?Error) => void) {
   }
 }
 
+// we track the 'depth' of the act() calls with this counter,
+// so we can tell if any async act() calls try to run in parallel.
+
+let actingUpdatesScopeDepth = 0;
+
 function act(callback: () => Thenable) {
   let previousActingUpdatesScopeDepth;
   if (__DEV__) {
@@ -119,7 +141,7 @@ function act(callback: () => Thenable) {
         called = true;
         result.then(
           () => {
-            flushEffectsAndMicroTasks((err: ?Error) => {
+            flushWorkAndMicroTasks((err: ?Error) => {
               onDone();
               if (err) {
                 reject(err);
@@ -147,7 +169,7 @@ function act(callback: () => Thenable) {
 
     // flush effects until none remain, and cleanup
     try {
-      while (flushPassiveEffects()) {}
+      flushWork();
       onDone();
     } catch (err) {
       onDone();

packages/react-noop-renderer/src/createReactNoop.js

@@ -650,14 +650,32 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   // this act() implementation should be exactly the same in
   // ReactTestUtilsAct.js, ReactTestRendererAct.js, createReactNoop.js
 
-  let actingUpdatesScopeDepth = 0;
+  let hasWarnedAboutMissingMockScheduler = false;
+  const flushWork =
+    Scheduler.unstable_flushWithoutYielding ||
+    function() {
+      if (hasWarnedAboutMissingMockScheduler === false) {
+        warningWithoutStack(
+          null,
+          'Starting from React v17, the "scheduler" module will need to be mocked ' +
+            'to guarantee consistent behaviour across tests and browsers. To fix this, add the following ' +
+            "to the top of your tests, or in your framework's global config file -\n\n" +
+            'As an example, for jest - \n' +
+            "jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));\n\n" +
+            'For more info, visit https://fb.me/react-mock-scheduler',
+        );
+        hasWarnedAboutMissingMockScheduler = true;
+      }
 
-  function flushEffectsAndMicroTasks(onDone: (err: ?Error) => void) {
+      while (flushPassiveEffects()) {}
+    };
+
+  function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
     try {
-      flushPassiveEffects();
+      flushWork();
       enqueueTask(() => {
-        if (flushPassiveEffects()) {
-          flushEffectsAndMicroTasks(onDone);
+        if (flushWork()) {
+          flushWorkAndMicroTasks(onDone);
         } else {
           onDone();
         }
@@ -667,6 +685,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     }
   }
 
+  // we track the 'depth' of the act() calls with this counter,
+  // so we can tell if any async act() calls try to run in parallel.
+
+  let actingUpdatesScopeDepth = 0;
+
   function act(callback: () => Thenable) {
     let previousActingUpdatesScopeDepth;
     if (__DEV__) {
@@ -727,7 +750,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           called = true;
           result.then(
             () => {
-              flushEffectsAndMicroTasks((err: ?Error) => {
+              flushWorkAndMicroTasks((err: ?Error) => {
                 onDone();
                 if (err) {
                   reject(err);
@@ -755,7 +778,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
       // flush effects until none remain, and cleanup
       try {
-        while (flushPassiveEffects()) {}
+        flushWork();
         onDone();
       } catch (err) {
         onDone();