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

@@ -11,21 +11,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-dom/test-utils';
 import TestRenderer from 'react-test-renderer';
+global.__DEV__ = process.env.NODE_ENV !== 'production';
 
-let spy;
-beforeEach(() => {
-  spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+expect.extend({
+  ...require('../../../scripts/jest/matchers/toWarnDev'),
 });
 
-function confirmWarning() {
-  expect(spy).toHaveBeenCalledWith(
-    expect.stringContaining(
-      "It looks like you're using the wrong act() around your test interactions."
-    ),
-    ''
-  );
-}
-
 function App(props) {
   return 'hello world';
 }
@@ -34,29 +25,33 @@ it("doesn't warn when you use the right act + renderer: dom", () => {
   TestUtils.act(() => {
     TestUtils.renderIntoDocument(<App />);
   });
-  expect(spy).not.toHaveBeenCalled();
 });
 
 it("doesn't warn when you use the right act + renderer: test", () => {
   TestRenderer.act(() => {
     TestRenderer.create(<App />);
   });
-  expect(spy).not.toHaveBeenCalled();
 });
 
-it('works with createRoot().render combo', () => {
+it('warns when using createRoot() + .render', () => {
   const root = ReactDOM.unstable_createRoot(document.createElement('div'));
-  TestRenderer.act(() => {
-    root.render(<App />);
+  expect(() => {
+    TestRenderer.act(() => {
+      root.render(<App />);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"], {
+    withoutStack: true,
   });
-  confirmWarning();
 });
 
 it('warns when using the wrong act version - test + dom: render', () => {
-  TestRenderer.act(() => {
-    TestUtils.renderIntoDocument(<App />);
+  expect(() => {
+    TestRenderer.act(() => {
+      TestUtils.renderIntoDocument(<App />);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"], {
+    withoutStack: true,
   });
-  confirmWarning();
 });
 
 it('warns when using the wrong act version - test + dom: updates', () => {
@@ -67,29 +62,35 @@ it('warns when using the wrong act version - test + dom: updates', () => {
     return ctr;
   }
   TestUtils.renderIntoDocument(<Counter />);
-  TestRenderer.act(() => {
-    setCtr(1);
-  });
-  confirmWarning();
+  expect(() => {
+    TestRenderer.act(() => {
+      setCtr(1);
+    });
+  }).toWarnDev([
+    'An update to Counter inside a test was not wrapped in act',
+    "It looks like you're using the wrong act()",
+  ]);
 });
 
 it('warns when using the wrong act version - dom + test: .create()', () => {
-  TestUtils.act(() => {
-    TestRenderer.create(<App />);
+  expect(() => {
+    TestUtils.act(() => {
+      TestRenderer.create(<App />);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"], {
+    withoutStack: true,
   });
-  confirmWarning();
 });
 
 it('warns when using the wrong act version - dom + test: .update()', () => {
-  let root;
-  // use the right one here so we don't get the first warning
-  TestRenderer.act(() => {
-    root = TestRenderer.create(<App key="one" />);
-  });
-  TestUtils.act(() => {
-    root.update(<App key="two" />);
+  const root = TestRenderer.create(<App key="one" />);
+  expect(() => {
+    TestUtils.act(() => {
+      root.update(<App key="two" />);
+    });
+  }).toWarnDev(["It looks like you're using the wrong act()"], {
+    withoutStack: true,
   });
-  confirmWarning();
 });
 
 it('warns when using the wrong act version - dom + test: updates', () => {
@@ -100,8 +101,20 @@ it('warns when using the wrong act version - dom + test: updates', () => {
     return ctr;
   }
   const root = TestRenderer.create(<Counter />);
-  TestUtils.act(() => {
-    setCtr(1);
+  expect(() => {
+    TestUtils.act(() => {
+      setCtr(1);
+    });
+  }).toWarnDev([
+    'An update to Counter inside a test was not wrapped in act',
+    "It looks like you're using the wrong act()",
+  ]);
+});
+
+it("doesn't warn if you use nested acts from different renderers", () => {
+  TestRenderer.act(() => {
+    TestUtils.act(() => {
+      TestRenderer.create(<App />);
+    });
   });
-  confirmWarning();
 });

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

@@ -702,17 +702,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

@@ -2387,10 +2387,10 @@ export const ReactActingRendererSigil = {};
 export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      ReactCurrentActingRendererSigil.current !== null &&
-      // use the function flushPassiveEffects directly as the sigil
-      // so this comparison is expected here
-      ReactCurrentActingRendererSigil.current !== ReactActingRendererSigil
+      ReactCurrentActingRendererSigil.current.length !== 0 &&
+      ReactCurrentActingRendererSigil.current.indexOf(
+        ReactActingRendererSigil,
+      ) === -1
     ) {
       // it looks like we're using the wrong matching act(), so log a warning
       warningWithoutStack(
@@ -2417,7 +2417,9 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
       executionContext === NoContext &&
-      ReactCurrentActingRendererSigil.current !== ReactActingRendererSigil
+      ReactCurrentActingRendererSigil.current.indexOf(
+        ReactActingRendererSigil,
+      ) === -1
     ) {
       warningWithoutStack(
         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;