make testing builds for React/ReactDOM

This PR introduces UMD_TESTING, NODE_TESTING, and FB_WWW_TESTING build types for `react` and `react-dom`.
- changes infra to generate these builds
- exports act on ReactDOM in these testing builds
- uses the new test builds in fixtures/dom

In the next PR -

- I'll use the new builds for all our own tests
- I'll replace usages of TestUtils.act with ReactDOM.act.

Author: threepointone

.eslintrc.js

@@ -168,6 +168,7 @@ module.exports = {
     __PROFILE__: true,
     __UMD__: true,
     __EXPERIMENTAL__: true,
+    __TEST__: true,
     trustedTypes: true,
   },
 };

fixtures/dom/src/__tests__/nested-act-test.js

@@ -8,18 +8,24 @@
  */
 
 let React;
-let TestUtils;
+let ReactDOM;
 let TestRenderer;
 
 global.__DEV__ = process.env.NODE_ENV !== 'production';
 
+jest.mock('react', () => require.requireActual('react/cjs/react.testing.js'));
+jest.mock('react-dom', () =>
+  require.requireActual('react-dom/cjs/react-dom.testing.js')
+);
+// we'll replace the above with react/testing and react-dom/testing right before the next minor
+
 expect.extend(require('../toWarnDev'));
 
 describe('unmocked scheduler', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    TestUtils = require('react-dom/test-utils');
+    ReactDOM = require('react-dom');
     TestRenderer = require('react-test-renderer');
   });
 
@@ -33,7 +39,7 @@ describe('unmocked scheduler', () => {
     }
     // in legacy mode, this tests whether an act only flushes its own effects
     TestRenderer.act(() => {
-      TestUtils.act(() => {
+      ReactDOM.act(() => {
         TestRenderer.create(<Effecty />);
       });
       expect(log).toEqual([]);
@@ -42,7 +48,7 @@ describe('unmocked scheduler', () => {
 
     log = [];
     // for doublechecking, we flip it inside out, and assert on the outermost
-    TestUtils.act(() => {
+    ReactDOM.act(() => {
       TestRenderer.act(() => {
         TestRenderer.create(<Effecty />);
       });
@@ -59,7 +65,7 @@ describe('mocked scheduler', () => {
       require.requireActual('scheduler/unstable_mock')
     );
     React = require('react');
-    TestUtils = require('react-dom/test-utils');
+    ReactDOM = require('react-dom');
     TestRenderer = require('react-test-renderer');
   });
 
@@ -77,7 +83,7 @@ describe('mocked scheduler', () => {
     }
     // with a mocked scheduler, this tests whether it flushes all work only on the outermost act
     TestRenderer.act(() => {
-      TestUtils.act(() => {
+      ReactDOM.act(() => {
         TestRenderer.create(<Effecty />);
       });
       expect(log).toEqual([]);
@@ -86,7 +92,7 @@ describe('mocked scheduler', () => {
 
     log = [];
     // for doublechecking, we flip it inside out, and assert on the outermost
-    TestUtils.act(() => {
+    ReactDOM.act(() => {
       TestRenderer.act(() => {
         TestRenderer.create(<Effecty />);
       });

fixtures/dom/src/__tests__/wrong-act-test.js

@@ -12,13 +12,18 @@ let ReactDOM;
 let ReactART;
 let ARTSVGMode;
 let ARTCurrentMode;
-let TestUtils;
 let TestRenderer;
 let ARTTest;
 
 global.__DEV__ = process.env.NODE_ENV !== 'production';
 global.__EXPERIMENTAL__ = process.env.RELEASE_CHANNEL === 'experimental';
 
+jest.mock('react', () => require.requireActual('react/cjs/react.testing.js'));
+jest.mock('react-dom', () =>
+  require.requireActual('react-dom/cjs/react-dom.testing.js')
+);
+// we'll replace the above with react/testing and react-dom/testing right before the next minor
+
 expect.extend(require('../toWarnDev'));
 
 function App(props) {
@@ -32,7 +37,6 @@ beforeEach(() => {
   ReactART = require('react-art');
   ARTSVGMode = require('art/modes/svg');
   ARTCurrentMode = require('art/modes/current');
-  TestUtils = require('react-dom/test-utils');
   TestRenderer = require('react-test-renderer');
 
   ARTCurrentMode.setCurrent(ARTSVGMode);
@@ -70,8 +74,8 @@ beforeEach(() => {
 });
 
 it("doesn't warn when you use the right act + renderer: dom", () => {
-  TestUtils.act(() => {
-    TestUtils.renderIntoDocument(<App />);
+  ReactDOM.act(() => {
+    ReactDOM.render(<App />, document.createElement('div'));
   });
 });
 
@@ -86,7 +90,7 @@ it('resets correctly across renderers', () => {
     React.useEffect(() => {}, []);
     return null;
   }
-  TestUtils.act(() => {
+  ReactDOM.act(() => {
     TestRenderer.act(() => {});
     expect(() => {
       TestRenderer.create(<Effecty />);
@@ -99,7 +103,7 @@ it('resets correctly across renderers', () => {
 it('warns when using the wrong act version - test + dom: render', () => {
   expect(() => {
     TestRenderer.act(() => {
-      TestUtils.renderIntoDocument(<App />);
+      ReactDOM.render(<App />, document.createElement('div'));
     });
   }).toWarnDev(["It looks like you're using the wrong act()"], {
     withoutStack: true,
@@ -113,7 +117,7 @@ it('warns when using the wrong act version - test + dom: updates', () => {
     setCtr = _setCtr;
     return ctr;
   }
-  TestUtils.renderIntoDocument(<Counter />);
+  ReactDOM.render(<Counter />, document.createElement('div'));
   expect(() => {
     TestRenderer.act(() => {
       setCtr(1);
@@ -123,7 +127,7 @@ it('warns when using the wrong act version - test + dom: updates', () => {
 
 it('warns when using the wrong act version - dom + test: .create()', () => {
   expect(() => {
-    TestUtils.act(() => {
+    ReactDOM.act(() => {
       TestRenderer.create(<App />);
     });
   }).toWarnDev(["It looks like you're using the wrong act()"], {
@@ -134,7 +138,7 @@ it('warns when using the wrong act version - dom + test: .create()', () => {
 it('warns when using the wrong act version - dom + test: .update()', () => {
   const root = TestRenderer.create(<App key="one" />);
   expect(() => {
-    TestUtils.act(() => {
+    ReactDOM.act(() => {
       root.update(<App key="two" />);
     });
   }).toWarnDev(["It looks like you're using the wrong act()"], {
@@ -151,15 +155,15 @@ it('warns when using the wrong act version - dom + test: updates', () => {
   }
   TestRenderer.create(<Counter />);
   expect(() => {
-    TestUtils.act(() => {
+    ReactDOM.act(() => {
       setCtr(1);
     });
   }).toWarnDev(["It looks like you're using the wrong act()"]);
 });
 
 it('does not warn when nesting react-act inside react-dom', () => {
-  TestUtils.act(() => {
-    TestUtils.renderIntoDocument(<ARTTest />);
+  ReactDOM.act(() => {
+    ReactDOM.render(<ARTTest />, document.createElement('div'));
   });
 });
 
@@ -171,7 +175,7 @@ it('does not warn when nesting react-act inside react-test-renderer', () => {
 
 it("doesn't warn if you use nested acts from different renderers", () => {
   TestRenderer.act(() => {
-    TestUtils.act(() => {
+    ReactDOM.act(() => {
       TestRenderer.create(<App />);
     });
   });

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

@@ -722,6 +722,7 @@ function runActTests(label, render, unmount, rerender) {
 
     describe('suspense', () => {
       if (__DEV__ && __EXPERIMENTAL__) {
+        // todo - remove __DEV__ check once we start using testing builds
         it('triggers fallbacks if available', async () => {
           let resolved = false;
           let resolve;

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

@@ -35,6 +35,7 @@ import {
   attemptUserBlockingHydration,
   attemptContinuousHydration,
   attemptHydrationAtCurrentPriority,
+  act,
 } from 'react-reconciler/inline.dom';
 import {createPortal as createPortalImpl} from 'shared/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
@@ -249,4 +250,8 @@ if (__DEV__) {
   }
 }
 
+if (__TEST__) {
+  ReactDOM.act = act;
+}
+
 export default ReactDOM;