don't fire missing act() warnings for react-art (#15975)

* use toWarnDev for dom fixture tests

forks toWarnDev from root into fixture/dom, updates tes tests to use it

* disable act() warnings for react-art()

- For 'secondary' renderers like react-act, we don't want to fire missing act() warnings; the wrapping renderer will fire warnings anyway, and when it flushes, it flushes effects *across* renderers.

- I could have used isPrimaryRenderer as the flag, but this is marked as false for react-test-renderer, and we *do* want the warning to fire for it. Hence a new flag.

* add missing dependency `art` to fixtures/dom

Author: threepointone

fixtures/dom/package.json

@@ -7,9 +7,11 @@
   },
   "dependencies": {
     "@babel/standalone": "^7.0.0",
+    "art": "^0.10.3",
     "classnames": "^2.2.5",
     "codemirror": "^5.40.0",
     "core-js": "^2.4.1",
+    "jest-diff": "^24.8.0",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
     "react": "^15.4.1",

fixtures/dom/src/index.test.js

@@ -9,22 +9,17 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactART from 'react-art';
+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';
 
-let spy;
-beforeEach(() => {
-  spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-});
+ARTCurrentMode.setCurrent(ARTSVGMode);
 
-function confirmWarning() {
-  expect(spy).toHaveBeenCalledWith(
-    expect.stringContaining(
-      "It looks like you're using the wrong act() around your test interactions."
-    ),
-    ''
-  );
-}
+global.__DEV__ = process.env.NODE_ENV !== 'production';
+
+expect.extend(require('./toWarnDev'));
 
 function App(props) {
   return 'hello world';
@@ -34,29 +29,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 +66,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" />);
+  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,
   });
-  TestUtils.act(() => {
-    root.update(<App key="two" />);
-  });
-  confirmWarning();
 });
 
 it('warns when using the wrong act version - dom + test: updates', () => {
@@ -100,8 +105,56 @@ it('warns when using the wrong act version - dom + test: updates', () => {
     return ctr;
   }
   const root = TestRenderer.create(<Counter />);
+  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()",
+  ]);
+});
+
+const {Surface, Group, Shape} = ReactART;
+function ARTTest(props) {
+  return (
+    <Surface width={150} height={200}>
+      <Group>
+        <Shape
+          d="M0,0l50,0l0,50l-50,0z"
+          fill={new ReactART.LinearGradient(['black', 'white'])}
+          key="a"
+          width={50}
+          height={50}
+          x={50}
+          y={50}
+          opacity={0.1}
+        />
+        <Shape
+          fill="#3C5A99"
+          key="b"
+          scale={0.5}
+          x={50}
+          y={50}
+          title="This is an F"
+          cursor="pointer">
+          M64.564,38.583H54l0.008-5.834c0-3.035,0.293-4.666,4.657-4.666
+          h5.833V16.429h-9.33c-11.213,0-15.159,5.654-15.159,15.16v6.994
+          h-6.99v11.652h6.99v33.815H54V50.235h9.331L64.564,38.583z
+        </Shape>
+      </Group>
+    </Surface>
+  );
+}
+
+it('does not warn when nesting react-act inside react-dom', () => {
   TestUtils.act(() => {
-    setCtr(1);
+    TestUtils.renderIntoDocument(<ARTTest />);
+  });
+});
+
+it('does not warn when nesting react-act inside react-test-renderer', () => {
+  TestRenderer.act(() => {
+    TestRenderer.create(<ARTTest />);
   });
-  confirmWarning();
 });