allow nested acts from different renderers

sometimes apps can be made wtih multiple renderers. a specific usecase is react-art embedded inside react-dom. in these cases, we want to be able to wrap an update with acts corrsponding to both the renderers. In this PR, we change ReactCurrentActingRendererSigil to hold a stack of sigils (instead of just the current active one), pushing and popping onto it as required.

This commit also fixes the dom fixtures tests, which were broken? ugh.

Author: threepointone

fixtures/dom/src/index.test.js

@@ -14,7 +14,6 @@ import ARTSVGMode from 'art/modes/svg';
 import ARTCurrentMode from 'art/modes/current';
 import TestUtils from 'react-dom/test-utils';
 import TestRenderer from 'react-test-renderer';
-
 ARTCurrentMode.setCurrent(ARTSVGMode);
 
 global.__DEV__ = process.env.NODE_ENV !== 'production';
@@ -158,3 +157,11 @@ it('does not warn when nesting react-act inside react-test-renderer', () => {
     TestRenderer.create(<ARTTest />);
   });
 });
+
+it("doesn't warn if you use nested acts from different renderers", () => {
+  TestRenderer.act(() => {
+    TestUtils.act(() => {
+      TestRenderer.create(<App />);
+    });
+  });
+});

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

@@ -86,17 +86,15 @@ let actingUpdatesScopeDepth = 0;
 
 function act(callback: () => Thenable) {
   let previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  let previousActingUpdatesSigil;
   actingUpdatesScopeDepth++;
   if (__DEV__) {
-    previousActingUpdatesSigil = ReactCurrentActingRendererSigil.current;
-    ReactCurrentActingRendererSigil.current = ReactActingRendererSigil;
+    ReactCurrentActingRendererSigil.current.push(ReactActingRendererSigil);
   }
 
   function onDone() {
     actingUpdatesScopeDepth--;
     if (__DEV__) {
-      ReactCurrentActingRendererSigil.current = previousActingUpdatesSigil;
+      ReactCurrentActingRendererSigil.current.pop();
       if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
         // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
         warningWithoutStack(

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

@@ -615,17 +615,15 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
   function act(callback: () => Thenable) {
     let previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-    let previousActingUpdatesSigil;
     actingUpdatesScopeDepth++;
     if (__DEV__) {
-      previousActingUpdatesSigil = ReactCurrentActingRendererSigil.current;
-      ReactCurrentActingRendererSigil.current = ReactActingRendererSigil;
+      ReactCurrentActingRendererSigil.current.push(ReactActingRendererSigil);
     }
 
     function onDone() {
       actingUpdatesScopeDepth--;
       if (__DEV__) {
-        ReactCurrentActingRendererSigil.current = previousActingUpdatesSigil;
+        ReactCurrentActingRendererSigil.current.pop();
         if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
           // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
           warningWithoutStack(

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -2422,8 +2422,10 @@ export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
   if (__DEV__) {
     if (
       shouldWarnUnactedUpdates === true &&
-      ReactCurrentActingRendererSigil.current !== null &&
-      ReactCurrentActingRendererSigil.current !== ReactActingRendererSigil
+      ReactCurrentActingRendererSigil.current.length !== 0 &&
+      ReactCurrentActingRendererSigil.current.indexOf(
+        ReactActingRendererSigil,
+      ) === -1
     ) {
       warningWithoutStack(
         false,
@@ -2449,7 +2451,9 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
       shouldWarnUnactedUpdates === true &&
-      ReactCurrentActingRendererSigil.current !== ReactActingRendererSigil
+      ReactCurrentActingRendererSigil.current.indexOf(
+        ReactActingRendererSigil,
+      ) === -1
     ) {
       warningWithoutStack(
         false,
@@ -2476,7 +2480,9 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
     if (
       shouldWarnUnactedUpdates === true &&
       executionContext === NoContext &&
-      ReactCurrentActingRendererSigil.current !== ReactActingRendererSigil
+      ReactCurrentActingRendererSigil.current.indexOf(
+        ReactActingRendererSigil,
+      ) === -1
     ) {
       warningWithoutStack(
         false,

packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js

@@ -31,7 +31,6 @@ describe('ReactNoop.act()', () => {
         />,
       );
     });
-    expect(Scheduler).toFlushWithoutYielding();
     expect(calledLog).toEqual([0]);
   });
 
@@ -54,7 +53,6 @@ describe('ReactNoop.act()', () => {
       ReactNoop.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['stage 1', 'stage 2']);
-    expect(Scheduler).toFlushWithoutYielding();
     expect(ReactNoop.getChildren()).toEqual([{text: '1', hidden: false}]);
   });
 });

packages/react-test-renderer/src/ReactTestRendererAct.js

@@ -67,17 +67,15 @@ let actingUpdatesScopeDepth = 0;
 
 function act(callback: () => Thenable) {
   let previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  let previousActingUpdatesSigil;
   actingUpdatesScopeDepth++;
   if (__DEV__) {
-    previousActingUpdatesSigil = ReactCurrentActingRendererSigil.current;
-    ReactCurrentActingRendererSigil.current = ReactActingRendererSigil;
+    ReactCurrentActingRendererSigil.current.push(ReactActingRendererSigil);
   }
 
   function onDone() {
     actingUpdatesScopeDepth--;
     if (__DEV__) {
-      ReactCurrentActingRendererSigil.current = previousActingUpdatesSigil;
+      ReactCurrentActingRendererSigil.current.pop();
       if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
         // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
         warningWithoutStack(

packages/react/src/ReactCurrentActingRendererSigil.js

@@ -8,12 +8,12 @@
  */
 
 /**
- * Used by act() to track whether you're outside an act() scope.
- * We use a renderer's flushPassiveEffects as the sigil value
- * so we can track identity of the renderer.
+ * We maintain a 'stack' of renderer specific sigils
+ * corresponding to act() calls, so we can track whenever an update
+ * happens inside/outside of one.
  */
 
 const ReactCurrentActingRendererSigil = {
-  current: (null: null | (() => boolean)),
+  current: ([]: Array<{}>),
 };
 export default ReactCurrentActingRendererSigil;