Update tests to import from react-dom/client

facebook · Feb 28, 2022 · 117abf3 · 117abf3
1 parent c7d67df
commit 117abf3
Show file tree

Hide file tree

Showing 47 changed files with 439 additions and 317 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -11,7 +11,7 @@
 
 describe('Timeline profiler', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let renderHelper;
   let renderRootHelper;
@@ -31,15 +31,15 @@ describe('Timeline profiler', () => {
     };
     renderRootHelper = element => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(element);
       const unmountFn = () => root.unmount();
       unmountFns.push(unmountFn);
       return unmountFn;
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     store = global.store;

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -7,7 +7,7 @@
  * @flow
  */
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let act;
 let fakeConsole;
 let legacyRender;
@@ -53,7 +53,7 @@ describe('console', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -476,7 +476,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -515,7 +515,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -557,7 +557,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -605,7 +605,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -639,7 +639,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
@@ -719,7 +719,7 @@ describe('console error', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -728,7 +728,7 @@ describe('console error', () => {
 
   it('error in console log throws without interfering with logging', () => {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -16,6 +16,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('InspectedElement', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let PropTypes;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
@@ -52,6 +53,7 @@ describe('InspectedElement', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     PropTypes = require('prop-types');
     TestUtilsAct = require('jest-react').act;
     TestRenderer = utils.requireTestRenderer();
@@ -506,7 +508,7 @@ describe('InspectedElement', () => {
     });
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await utils.actAsync(() => root.render(<Target a={1} b="abc" />));
 
     expect(targetRenderCount).toBe(1);
@@ -2091,25 +2093,25 @@ describe('InspectedElement', () => {
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
   });
 
-  it('should display the root type for ReactDOM.hydrateRoot', async () => {
+  it('should display the root type for ReactDOMClient.hydrateRoot', async () => {
     const Example = () => <div />;
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
       container.innerHTML = '<div></div>';
-      ReactDOM.hydrateRoot(container).render(<Example />);
+      ReactDOMClient.hydrateRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
   });
 
-  it('should display the root type for ReactDOM.createRoot', async () => {
+  it('should display the root type for ReactDOMClient.createRoot', async () => {
     const Example = () => <div />;
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -2133,7 +2135,7 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     shouldThrow = true;

diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -12,6 +12,7 @@
 describe('Timeline profiler', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let utils;
 
@@ -76,6 +77,7 @@ describe('Timeline profiler', () => {
 
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
 
       setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
@@ -797,7 +799,7 @@ describe('Timeline profiler', () => {
           return true;
         }
 
-        const root = ReactDOM.createRoot(document.createElement('div'));
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
         utils.act(() => root.render(<App />));
 
         const data = await preprocessData([
@@ -1222,7 +1224,7 @@ describe('Timeline profiler', () => {
 
         const testMarks = [creactCpuProfilerSample()];
 
-        const root = ReactDOM.createRoot(document.createElement('div'));
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
         utils.act(() =>
           root.render(
             <React.Suspense fallback="Loading...">
@@ -1342,7 +1344,9 @@ describe('Timeline profiler', () => {
             // Advance the clock by some arbitrary amount.
             startTime += 50000;
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
 
             // Temporarily turn off the act environment, since we're intentionally using Scheduler instead.
             global.IS_REACT_ACT_ENVIRONMENT = false;
@@ -1398,7 +1402,9 @@ describe('Timeline profiler', () => {
               return didMount;
             }
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1434,7 +1440,9 @@ describe('Timeline profiler', () => {
               }
             }
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1471,7 +1479,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1530,7 +1540,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1599,7 +1611,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1664,7 +1678,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1730,7 +1746,9 @@ describe('Timeline profiler', () => {
             const testMarks = [creactCpuProfilerSample()];
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <ErrorBoundary>
@@ -1775,7 +1793,9 @@ describe('Timeline profiler', () => {
             }
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <React.Suspense fallback="Loading...">
@@ -1830,7 +1850,9 @@ describe('Timeline profiler', () => {
             }
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <React.Suspense fallback="Loading...">
@@ -2071,7 +2093,7 @@ describe('Timeline profiler', () => {
         return true;
       }
 
-      const root = ReactDOM.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
       utils.act(() => root.render(<App />));
       utils.act(() => store.profilerStore.stopProfiling());
 

diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -15,6 +15,7 @@ describe('ProfilingCache', () => {
   let PropTypes;
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
@@ -36,6 +37,7 @@ describe('ProfilingCache', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     TestRenderer = utils.requireTestRenderer();
   });
@@ -771,7 +773,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
@@ -805,7 +807,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
@@ -834,7 +836,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));