Use createRoot in ReactTestUtilsActUnmockedScheduler-test

Author: Jack Pope

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

@@ -10,10 +10,11 @@
 // sanity tests to make sure act() works without a mocked scheduler
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let act;
 let container;
 let yields;
+let prevActGlobal;
 
 function clearLog() {
   try {
@@ -23,48 +24,43 @@ function clearLog() {
   }
 }
 
-function render(el, dom) {
-  ReactDOM.render(el, dom);
-}
-
-function unmount(dom) {
-  ReactDOM.unmountComponentAtNode(dom);
-}
-
 beforeEach(() => {
+  prevActGlobal = global.IS_REACT_ACT_ENVIRONMENT;
+  global.IS_REACT_ACT_ENVIRONMENT = true;
   jest.resetModules();
   jest.unmock('scheduler');
   yields = [];
   React = require('react');
-  ReactDOM = require('react-dom');
+  ReactDOMClient = require('react-dom/client');
   act = React.unstable_act;
   container = document.createElement('div');
   document.body.appendChild(container);
 });
 
 afterEach(() => {
-  unmount(container);
+  global.IS_REACT_ACT_ENVIRONMENT = prevActGlobal;
   document.body.removeChild(container);
 });
 
 // @gate __DEV__
-it('can use act to flush effects', () => {
+it('can use act to flush effects', async () => {
   function App() {
     React.useEffect(() => {
       yields.push(100);
     });
     return null;
   }
 
-  act(() => {
-    render(<App />, container);
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
   });
 
   expect(clearLog()).toEqual([100]);
 });
 
 // @gate __DEV__
-it('flushes effects on every call', () => {
+it('flushes effects on every call', async () => {
   function App() {
     const [ctr, setCtr] = React.useState(0);
     React.useEffect(() => {
@@ -77,8 +73,9 @@ it('flushes effects on every call', () => {
     );
   }
 
-  act(() => {
-    render(<App />, container);
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
   });
 
   expect(clearLog()).toEqual([0]);
@@ -103,7 +100,7 @@ it('flushes effects on every call', () => {
 });
 
 // @gate __DEV__
-it("should keep flushing effects until they're done", () => {
+it("should keep flushing effects until they're done", async () => {
   function App() {
     const [ctr, setCtr] = React.useState(0);
     React.useEffect(() => {
@@ -114,25 +111,27 @@ it("should keep flushing effects until they're done", () => {
     return ctr;
   }
 
-  act(() => {
-    render(<App />, container);
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
   });
 
   expect(container.innerHTML).toEqual('5');
 });
 
 // @gate __DEV__
-it('should flush effects only on exiting the outermost act', () => {
+it('should flush effects only on exiting the outermost act', async () => {
   function App() {
     React.useEffect(() => {
       yields.push(0);
     });
     return null;
   }
+  const root = ReactDOMClient.createRoot(container);
   // let's nest a couple of act() calls
-  act(() => {
-    act(() => {
-      render(<App />, container);
+  await act(async () => {
+    await act(() => {
+      root.render(<App />);
     });
     // the effect wouldn't have yielded yet because
     // we're still inside an act() scope
@@ -150,7 +149,9 @@ it('can handle cascading promises', async () => {
     const [state, setState] = React.useState(0);
     async function ticker() {
       await null;
-      setState(x => x + 1);
+      await act(() => {
+        setState(x => x + 1);
+      });
     }
     React.useEffect(() => {
       yields.push(state);
@@ -159,8 +160,9 @@ it('can handle cascading promises', async () => {
     return state;
   }
 
-  await act(async () => {
-    render(<App />, container);
+  const root = ReactDOMClient.createRoot(container);
+  await act(() => {
+    root.render(<App />);
   });
   // all 5 ticks present and accounted for
   expect(clearLog()).toEqual([0, 1, 2, 3, 4]);