diff --git a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
index 6b94016148..b2b4fe9fc9 100644
--- a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
+++ b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
@@ -9,13 +9,13 @@
 
 describe('Fast Refresh', () => {
   let React;
-  let ReactDOM;
   let ReactFreshRuntime;
   let act;
   let babel;
   let container;
   let exportsObj;
   let freshPlugin;
+  let legacyRender;
   let store;
   let withErrorsOrWarningsIgnored;
 
@@ -37,10 +37,9 @@ describe('Fast Refresh', () => {
     ReactFreshRuntime = require('react-refresh/runtime');
     ReactFreshRuntime.injectIntoGlobalHook(global);
 
-    ReactDOM = require('react-dom');
-
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
   });
 
@@ -74,7 +73,7 @@ describe('Fast Refresh', () => {
   function render(source) {
     const Component = execute(source);
     act(() => {
-      ReactDOM.render(<Component />, container);
+      legacyRender(<Component />, container);
     });
     // Module initialization shouldn't be counted as a hot update.
     expect(ReactFreshRuntime.performReactRefresh()).toBe(null);
@@ -99,7 +98,7 @@ describe('Fast Refresh', () => {
       // Here, we'll just force a re-render using the newer type to emulate this.
       const NextComponent = nextExports.default;
       act(() => {
-        ReactDOM.render(<NextComponent />, container);
+        legacyRender(<NextComponent />, container);
       });
     }
     act(() => {
diff --git a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
index 3028fc182d..48dbd400a9 100644
--- a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
+++ b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
@@ -25,8 +25,8 @@ function normalizeCodeLocInfo(str) {
 
 describe('component stack', () => {
   let React;
-  let ReactDOM;
   let act;
+  let legacyRender;
   let mockError;
   let mockWarn;
 
@@ -44,9 +44,9 @@ describe('component stack', () => {
 
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
 
     React = require('react');
-    ReactDOM = require('react-dom');
   });
 
   it('should log the current component stack along with an error or warning', () => {
@@ -60,7 +60,7 @@ describe('component stack', () => {
 
     const container = document.createElement('div');
 
-    act(() => ReactDOM.render(<Grandparent />, container));
+    act(() => legacyRender(<Grandparent />, container));
 
     expect(mockError).toHaveBeenCalledWith(
       'Test error.',
@@ -93,7 +93,7 @@ describe('component stack', () => {
     };
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Example test="abc" />, container));
+    act(() => legacyRender(<Example test="abc" />, container));
 
     expect(useEffectCount).toBe(1);
 
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 64597597ba..3d539f286a 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -9,9 +9,9 @@
 
 describe('console', () => {
   let React;
-  let ReactDOM;
   let act;
   let fakeConsole;
+  let legacyRender;
   let mockError;
   let mockInfo;
   let mockLog;
@@ -58,10 +58,10 @@ describe('console', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
 
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
   });
 
   function normalizeCodeLocInfo(str) {
@@ -176,7 +176,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+    act(() => legacyRender(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
@@ -203,7 +203,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(1);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -243,7 +243,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(2);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -298,8 +298,8 @@ describe('console', () => {
     }
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Parent />, container));
-    act(() => ReactDOM.render(<Parent />, container));
+    act(() => legacyRender(<Parent />, container));
+    act(() => legacyRender(<Parent />, container));
 
     expect(mockLog).toHaveBeenCalledTimes(2);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -350,7 +350,7 @@ describe('console', () => {
       }
     }
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(1);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -377,7 +377,7 @@ describe('console', () => {
     };
 
     unpatchConsole();
-    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+    act(() => legacyRender(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
@@ -391,7 +391,7 @@ describe('console', () => {
       breakOnWarn: false,
       showInlineWarningsAndErrors: false,
     });
-    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+    act(() => legacyRender(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
     expect(mockWarn.mock.calls[1]).toHaveLength(2);
@@ -435,7 +435,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(1);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -460,7 +460,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    act(() => legacyRender(<Component />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
diff --git a/packages/react-devtools-shared/src/__tests__/editing-test.js b/packages/react-devtools-shared/src/__tests__/editing-test.js
index 1a57927f51..78ab08b786 100644
--- a/packages/react-devtools-shared/src/__tests__/editing-test.js
+++ b/packages/react-devtools-shared/src/__tests__/editing-test.js
@@ -13,8 +13,8 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('editing interface', () => {
   let PropTypes;
   let React;
-  let ReactDOM;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -25,6 +25,8 @@ describe('editing interface', () => {
   beforeEach(() => {
     utils = require('./utils');
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -32,7 +34,6 @@ describe('editing interface', () => {
 
     PropTypes = require('prop-types');
     React = require('react');
-    ReactDOM = require('react-dom');
   });
 
   describe('props', () => {
@@ -67,7 +68,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <>
             <ClassComponent
               array={[1, 2, 3]}
@@ -435,7 +436,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <ClassComponent object={{nested: 'initial'}} shallow="initial" />,
           container,
         ),
@@ -652,7 +653,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<FunctionComponent />, container),
+        legacyRender(<FunctionComponent />, container),
       );
 
       hookID = 0; // index
@@ -902,7 +903,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <LegacyContextProvider>
             <ClassComponent />
           </LegacyContextProvider>,
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index be6a3d7b86..5bec9a74f6 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -31,12 +31,15 @@ describe('InspectedElement', () => {
   let TestUtilsAct;
   let TestRendererAct;
 
+  let legacyRender;
   let testRendererInstance;
 
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -139,7 +142,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, container),
+      legacyRender(<Example a={1} b="abc" />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -209,7 +212,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <React.Fragment>
           <LegacyContextProvider>
             <LegacyContextConsumer />
@@ -270,7 +273,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(
-      () => ReactDOM.render(<Example a={1} b="abc" />, container),
+      () => legacyRender(<Example a={1} b="abc" />, container),
       false,
     );
 
@@ -283,7 +286,7 @@ describe('InspectedElement', () => {
     `);
 
     await utils.actAsync(
-      () => ReactDOM.render(<Example a={2} b="def" />, container),
+      () => legacyRender(<Example a={2} b="def" />, container),
       false,
     );
 
@@ -319,7 +322,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Wrapper>
           <Target a={1} b="abc" />
         </Wrapper>,
@@ -349,7 +352,7 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(
       () =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper>
             <Target a={2} b="def" />
           </Wrapper>,
@@ -416,7 +419,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           boolean_false={false}
           boolean_true={true}
@@ -505,7 +508,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           anonymous_fn={instance.anonymousFunction}
           array_buffer={arrayBuffer}
@@ -669,7 +672,7 @@ describe('InspectedElement', () => {
 
     const iterable = generator();
     await utils.actAsync(() =>
-      ReactDOM.render(<Example prop={iterable} />, container),
+      legacyRender(<Example prop={iterable} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -693,7 +696,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example object={object} />, container),
+      legacyRender(<Example object={object} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -718,7 +721,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example object={object} />, container),
+      legacyRender(<Example object={object} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -755,7 +758,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example data={new CustomData()} />, container),
+      legacyRender(<Example data={new CustomData()} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -834,7 +837,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example object={object} />, container),
+      legacyRender(<Example object={object} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -889,7 +892,7 @@ describe('InspectedElement', () => {
     const Example = ({data}) => null;
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example data={testData} />, container),
+      legacyRender(<Example data={testData} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -920,7 +923,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             a: {
@@ -1075,7 +1078,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           set_of_sets={new Set([new Set([1, 2, 3]), new Set(['a', 'b', 'c'])])}
         />,
@@ -1141,7 +1144,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             a: {
@@ -1245,7 +1248,7 @@ describe('InspectedElement', () => {
 
     TestRendererAct(() => {
       TestUtilsAct(() => {
-        ReactDOM.render(
+        legacyRender(
           <Example
             nestedObject={{
               a: {
@@ -1304,7 +1307,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             a: {
@@ -1383,7 +1386,7 @@ describe('InspectedElement', () => {
 
     TestRendererAct(() => {
       TestUtilsAct(() => {
-        ReactDOM.render(
+        legacyRender(
           <Example
             nestedObject={{
               a: {
@@ -1439,7 +1442,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             value: 1,
@@ -1487,7 +1490,7 @@ describe('InspectedElement', () => {
     `);
 
     TestUtilsAct(() => {
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             value: 2,
@@ -1529,7 +1532,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, container),
+      legacyRender(<Example a={1} b="abc" />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -1573,7 +1576,7 @@ describe('InspectedElement', () => {
     };
 
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example nestedObject={nestedObject} />,
         document.createElement('div'),
       ),
@@ -1632,7 +1635,7 @@ describe('InspectedElement', () => {
     };
 
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example nestedObject={nestedObject} />,
         document.createElement('div'),
       ),
@@ -1707,7 +1710,7 @@ describe('InspectedElement', () => {
     const bigInt = BigInt(123); // eslint-disable-line no-undef
 
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           arrayBuffer={arrayBuffer}
           dataView={dataView}
@@ -1784,7 +1787,7 @@ describe('InspectedElement', () => {
     }
 
     await utils.actAsync(() =>
-      ReactDOM.render(<DisplayedComplexValue />, container),
+      legacyRender(<DisplayedComplexValue />, container),
     );
 
     const {hooks} = await inspectElementAtIndex(0);
@@ -1826,7 +1829,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example proxy={proxy} />, container),
+      legacyRender(<Example proxy={proxy} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -1860,7 +1863,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -1893,7 +1896,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -1926,7 +1929,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -1963,7 +1966,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -2030,7 +2033,7 @@ describe('InspectedElement', () => {
 
       await withErrorsOrWarningsIgnored(['test-only: '], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2066,7 +2069,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
       const data = await getErrorsAndWarningsForElementAtIndex(0);
@@ -2102,7 +2105,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2139,7 +2142,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2172,7 +2175,7 @@ describe('InspectedElement', () => {
         ['Warning: Each child in a list should have a unique "key" prop.'],
         async () => {
           await utils.actAsync(() =>
-            ReactDOM.render(<Example repeatWarningCount={1} />, container),
+            legacyRender(<Example repeatWarningCount={1} />, container),
           );
         },
       );
@@ -2202,7 +2205,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2233,7 +2236,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example id={1} />
               <Example id={2} />
@@ -2330,7 +2333,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example id={1} />
               <Example id={2} />
@@ -2433,7 +2436,7 @@ describe('InspectedElement', () => {
       const Example = () => 'example';
 
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <ErrorBoundary>
             <Example />
           </ErrorBoundary>,
@@ -2486,7 +2489,9 @@ describe('InspectedElement', () => {
       await toggleError(true);
 
       // we are in error state now, <Example /> won't show up
-      expect(store.getElementIDAtIndex(1)).toBe(null);
+      withErrorsOrWarningsIgnored(['Invalid index'], () => {
+        expect(store.getElementIDAtIndex(1)).toBe(null);
+      });
 
       // Inpsect <ErrorBoundary /> to toggle off the error state
       inspectedElement = await inspect(0);
diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
index 27b75afdd3..774b8ee663 100644
--- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -14,9 +14,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('OwnersListContext', () => {
   let React;
-  let ReactDOM;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -30,12 +30,13 @@ describe('OwnersListContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
 
     React = require('react');
-    ReactDOM = require('react-dom');
     TestRenderer = utils.requireTestRenderer();
 
     BridgeContext = require('react-devtools-shared/src/devtools/views/context')
@@ -73,7 +74,7 @@ describe('OwnersListContext', () => {
     const Child = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -132,7 +133,7 @@ describe('OwnersListContext', () => {
     const Child = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -170,7 +171,7 @@ describe('OwnersListContext', () => {
     const Parent = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -211,7 +212,7 @@ describe('OwnersListContext', () => {
     };
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     let didFinish = false;
diff --git a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
index 21c2b2427b..7a62f415ce 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
@@ -18,6 +18,7 @@ describe('ProfilerContext', () => {
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -33,6 +34,8 @@ describe('ProfilerContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -96,10 +99,10 @@ describe('ProfilerContext', () => {
     const containerA = document.createElement('div');
     const containerB = document.createElement('div');
 
-    await utils.actAsync(() => ReactDOM.render(<Component />, containerA));
+    await utils.actAsync(() => legacyRender(<Component />, containerA));
     expect(context.supportsProfiling).toBe(true);
 
-    await utils.actAsync(() => ReactDOM.render(<Component />, containerB));
+    await utils.actAsync(() => legacyRender(<Component />, containerB));
     await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));
     expect(context.supportsProfiling).toBe(true);
 
@@ -110,9 +113,7 @@ describe('ProfilerContext', () => {
   it('should gracefully handle an empty profiling session (with no recorded commits)', async () => {
     const Example = () => null;
 
-    utils.act(() =>
-      ReactDOM.render(<Example />, document.createElement('div')),
-    );
+    utils.act(() => legacyRender(<Example />, document.createElement('div')));
 
     let context: Context = ((null: any): Context);
 
@@ -150,14 +151,14 @@ describe('ProfilerContext', () => {
 
     const containerOne = document.createElement('div');
     const containerTwo = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Parent />, containerOne));
-    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    utils.act(() => legacyRender(<Parent />, containerOne));
+    utils.act(() => legacyRender(<Parent />, containerTwo));
     expect(store).toMatchSnapshot('mounted');
 
     // Profile and record updates to both roots.
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerTwo));
+    await utils.actAsync(() => legacyRender(<Parent />, containerOne));
+    await utils.actAsync(() => legacyRender(<Parent />, containerTwo));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     let context: Context = ((null: any): Context);
@@ -189,13 +190,13 @@ describe('ProfilerContext', () => {
 
     const containerOne = document.createElement('div');
     const containerTwo = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Parent />, containerOne));
-    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    utils.act(() => legacyRender(<Parent />, containerOne));
+    utils.act(() => legacyRender(<Parent />, containerTwo));
     expect(store).toMatchSnapshot('mounted');
 
     // Profile and record updates to only the first root.
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
+    await utils.actAsync(() => legacyRender(<Parent />, containerOne));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     let context: Context = ((null: any): Context);
@@ -228,14 +229,14 @@ describe('ProfilerContext', () => {
 
     const containerA = document.createElement('div');
     const containerB = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Parent />, containerA));
-    utils.act(() => ReactDOM.render(<Parent />, containerB));
+    utils.act(() => legacyRender(<Parent />, containerA));
+    utils.act(() => legacyRender(<Parent />, containerB));
     expect(store).toMatchSnapshot('mounted');
 
     // Profile and record updates.
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => legacyRender(<Parent />, containerA));
+    await utils.actAsync(() => legacyRender(<Parent />, containerB));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     let context: Context = ((null: any): Context);
@@ -263,8 +264,8 @@ describe('ProfilerContext', () => {
 
     // Profile and record more updates to both roots
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => legacyRender(<Parent />, containerA));
+    await utils.actAsync(() => legacyRender(<Parent />, containerB));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     const otherID = ((store.getElementIDAtIndex(0): any): number);
@@ -287,7 +288,7 @@ describe('ProfilerContext', () => {
 
     const container = document.createElement('div');
     utils.act(() =>
-      ReactDOM.render(<GrandParent includeChild={true} />, container),
+      legacyRender(<GrandParent includeChild={true} />, container),
     );
     expect(store).toMatchSnapshot('mounted');
 
@@ -297,10 +298,10 @@ describe('ProfilerContext', () => {
     // Profile and record updates.
     await utils.actAsync(() => store.profilerStore.startProfiling());
     await utils.actAsync(() =>
-      ReactDOM.render(<GrandParent includeChild={true} />, container),
+      legacyRender(<GrandParent includeChild={true} />, container),
     );
     await utils.actAsync(() =>
-      ReactDOM.render(<GrandParent includeChild={false} />, container),
+      legacyRender(<GrandParent includeChild={false} />, container),
     );
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index 7799756aed..ea81b1dcee 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -12,6 +12,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('ProfilerStore', () => {
   let React;
   let ReactDOM;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -19,6 +20,8 @@ describe('ProfilerStore', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     store = global.store;
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
@@ -38,15 +41,15 @@ describe('ProfilerStore', () => {
     const containerB = document.createElement('div');
 
     utils.act(() => {
-      ReactDOM.render(<Parent key="A" count={3} />, containerA);
-      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      legacyRender(<Parent key="A" count={3} />, containerA);
+      legacyRender(<Parent key="B" count={2} />, containerB);
     });
 
     utils.act(() => store.profilerStore.startProfiling());
 
     utils.act(() => {
-      ReactDOM.render(<Parent key="A" count={4} />, containerA);
-      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      legacyRender(<Parent key="A" count={4} />, containerA);
+      legacyRender(<Parent key="B" count={1} />, containerB);
     });
 
     utils.act(() => store.profilerStore.stopProfiling());
@@ -96,7 +99,7 @@ describe('ProfilerStore', () => {
 
     // It's important that this test uses legacy sync mode.
     // The root API does not trigger this particular failing case.
-    ReactDOM.render(<ControlledInput />, container);
+    legacyRender(<ControlledInput />, container);
 
     utils.act(() => store.profilerStore.startProfiling());
 
@@ -151,7 +154,7 @@ describe('ProfilerStore', () => {
 
     // It's important that this test uses legacy sync mode.
     // The root API does not trigger this particular failing case.
-    ReactDOM.render(<ControlledInput />, container);
+    legacyRender(<ControlledInput />, container);
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 0b7273054c..ace43294e9 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -18,6 +18,7 @@ describe('ProfilingCache', () => {
   let Scheduler;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -25,6 +26,8 @@ describe('ProfilingCache', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -60,14 +63,14 @@ describe('ProfilingCache', () => {
     const containerB = document.createElement('div');
     const containerC = document.createElement('div');
 
-    utils.act(() => ReactDOM.render(<Parent count={2} />, containerA));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, containerB));
+    utils.act(() => legacyRender(<Parent count={2} />, containerA));
+    utils.act(() => legacyRender(<Parent count={1} />, containerB));
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={3} />, containerA));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, containerC));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, containerA));
+    utils.act(() => legacyRender(<Parent count={3} />, containerA));
+    utils.act(() => legacyRender(<Parent count={1} />, containerC));
+    utils.act(() => legacyRender(<Parent count={1} />, containerA));
     utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
-    utils.act(() => ReactDOM.render(<Parent count={0} />, containerA));
+    utils.act(() => legacyRender(<Parent count={0} />, containerA));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allProfilingDataForRoots = [];
@@ -143,10 +146,10 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => legacyRender(<Parent count={2} />, container));
+    utils.act(() => legacyRender(<Parent count={3} />, container));
+    utils.act(() => legacyRender(<Parent count={1} />, container));
+    utils.act(() => legacyRender(<Parent count={0} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
@@ -248,16 +251,16 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
+    utils.act(() => legacyRender(<LegacyContextProvider />, container));
     expect(instance).not.toBeNull();
     utils.act(() => (instance: any).setState({count: 1}));
     utils.act(() =>
-      ReactDOM.render(<LegacyContextProvider foo={123} />, container),
+      legacyRender(<LegacyContextProvider foo={123} />, container),
     );
     utils.act(() =>
-      ReactDOM.render(<LegacyContextProvider bar="abc" />, container),
+      legacyRender(<LegacyContextProvider bar="abc" />, container),
     );
-    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
+    utils.act(() => legacyRender(<LegacyContextProvider />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
@@ -346,7 +349,7 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Context.Provider value={true}>
           <Component count={1} />
         </Context.Provider>,
@@ -356,7 +359,7 @@ describe('ProfilingCache', () => {
 
     // Second render has no changed hooks, only changed props.
     utils.act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Context.Provider value={true}>
           <Component count={2} />
         </Context.Provider>,
@@ -373,7 +376,7 @@ describe('ProfilingCache', () => {
     // Fifth render has a changed context value, but no changed hook.
     // Technically, DevTools will miss this "context" change since it only tracks legacy context.
     utils.act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Context.Provider value={false}>
           <Component count={2} />
         </Context.Provider>,
@@ -453,7 +456,7 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
@@ -508,7 +511,7 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     await utils.actAsync(() =>
-      ReactDOM.render(<Parent />, document.createElement('div')),
+      legacyRender(<Parent />, document.createElement('div')),
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
@@ -558,9 +561,9 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => legacyRender(<Parent count={1} />, container));
+    utils.act(() => legacyRender(<Parent count={2} />, container));
+    utils.act(() => legacyRender(<Parent count={3} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allFiberCommits = [];
@@ -624,7 +627,7 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<React.Suspense />, container));
+    utils.act(() => legacyRender(<React.Suspense />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     function Validator({commitIndex, rootID}) {
@@ -721,7 +724,7 @@ describe('ProfilingCache', () => {
     const {Simulate} = require('react-dom/test-utils');
 
     const container = document.createElement('div');
-    utils.act(() => ReactDOM.render(<App />, container));
+    utils.act(() => legacyRender(<App />, container));
     expect(container.textContent).toBe('Home');
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => Simulate.click(linkRef.current));
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index b16e38f88c..16b42f3908 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('profiling charts', () => {
   let React;
-  let ReactDOM;
   let Scheduler;
   let TestRenderer: TestRendererType;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -22,12 +22,13 @@ describe('profiling charts', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     store = global.store;
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
 
     React = require('react');
-    ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
     TestRenderer = utils.requireTestRenderer();
   });
@@ -54,8 +55,8 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => ReactDOM.render(<Parent />, container));
-      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
@@ -120,8 +121,8 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => ReactDOM.render(<Parent />, container));
-      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index 1f9c97d0df..9923fb33aa 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -15,6 +15,7 @@ describe('commit tree', () => {
   let ReactDOM;
   let Scheduler;
   let TestRenderer: TestRendererType;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -22,6 +23,8 @@ describe('commit tree', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     store = global.store;
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
@@ -47,10 +50,10 @@ describe('commit tree', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => legacyRender(<Parent count={1} />, container));
+    utils.act(() => legacyRender(<Parent count={3} />, container));
+    utils.act(() => legacyRender(<Parent count={2} />, container));
+    utils.act(() => legacyRender(<Parent count={0} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     let renderFinished = false;
@@ -108,16 +111,10 @@ describe('commit tree', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={true} />, container),
-      );
+      utils.act(() => legacyRender(<App renderChildren={true} />, container));
       await Promise.resolve();
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={true} />, container),
-      );
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={false} />, container),
-      );
+      utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      utils.act(() => legacyRender(<App renderChildren={false} />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
@@ -189,12 +186,8 @@ describe('commit tree', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={true} />, container),
-      );
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={false} />, container),
-      );
+      utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      utils.act(() => legacyRender(<App renderChildren={false} />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
diff --git a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
index cfcff6bad4..61dc9f6bfd 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -11,10 +11,10 @@ describe('profiling HostRoot', () => {
   let React;
   let ReactDOM;
   let Scheduler;
+  let legacyRender;
   let store: Store;
   let utils;
   let getEffectDurations;
-
   let effectDurations;
   let passiveEffectDurations;
 
@@ -22,6 +22,8 @@ describe('profiling HostRoot', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     getEffectDurations = require('../backend/utils').getEffectDurations;
 
     store = global.store;
@@ -61,7 +63,7 @@ describe('profiling HostRoot', () => {
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => {
       const container = document.createElement('div');
-      ReactDOM.render(<App />, container);
+      legacyRender(<App />, container);
     });
     utils.act(() => store.profilerStore.stopProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 04f14a41a9..02cea3d925 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -14,6 +14,7 @@ describe('Store', () => {
   let act;
   let bridge;
   let getRendererID;
+  let legacyRender;
   let store;
   let withErrorsOrWarningsIgnored;
 
@@ -28,6 +29,7 @@ describe('Store', () => {
     const utils = require('./utils');
     act = utils.act;
     getRendererID = utils.getRendererID;
+    legacyRender = utils.legacyRender;
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
   });
 
@@ -35,7 +37,7 @@ describe('Store', () => {
     const Component = () => <div>Hi</div>;
 
     act(() =>
-      ReactDOM.render(<Component count={4} />, document.createElement('div')),
+      legacyRender(<Component count={4} />, document.createElement('div')),
     );
     expect(store).toMatchSnapshot('1: mount');
 
@@ -53,10 +55,10 @@ describe('Store', () => {
 
     const container = document.createElement('div');
 
-    act(() => ReactDOM.render(<Root>{null}</Root>, container));
+    act(() => legacyRender(<Root>{null}</Root>, container));
     expect(store).toMatchSnapshot('1: mount');
 
-    act(() => ReactDOM.render(<div />, container));
+    act(() => legacyRender(<div />, container));
     expect(store).toMatchSnapshot('2: add host nodes');
   });
 
@@ -81,7 +83,7 @@ describe('Store', () => {
     const container = document.createElement('div');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <>
           <React.Suspense fallback="Loading...">
             <Owner />
@@ -117,10 +119,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      act(() => legacyRender(<Grandparent count={4} />, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      act(() => legacyRender(<Grandparent count={2} />, container));
       expect(store).toMatchSnapshot('2: update');
 
       act(() => ReactDOM.unmountComponentAtNode(container));
@@ -136,14 +138,14 @@ describe('Store', () => {
       const containerB = document.createElement('div');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={3} />, containerA);
-        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+        legacyRender(<Parent key="A" count={3} />, containerA);
+        legacyRender(<Parent key="B" count={2} />, containerB);
       });
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={4} />, containerA);
-        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+        legacyRender(<Parent key="A" count={4} />, containerA);
+        legacyRender(<Parent key="B" count={1} />, containerB);
       });
       expect(store).toMatchSnapshot('2: update');
 
@@ -171,10 +173,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={4} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={4} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
     });
@@ -201,11 +200,11 @@ describe('Store', () => {
       );
 
       const container = document.createElement('div');
-      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
       expect(store).toMatchSnapshot('1: loading');
 
       act(() => {
-        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+        legacyRender(<Wrapper shouldSuspense={false} />, container);
       });
       expect(store).toMatchSnapshot('2: resolved');
     });
@@ -251,7 +250,7 @@ describe('Store', () => {
 
       const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -262,7 +261,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('1: third child is suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -273,7 +272,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('2: first and third child are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -284,7 +283,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('3: second and third child are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -295,7 +294,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('4: first and third child are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={true}
             suspendFirst={true}
@@ -306,7 +305,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('5: parent is suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -317,7 +316,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('6: all children are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -346,7 +345,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('9: parent is suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -373,7 +372,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('12: all children are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -430,10 +429,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={2} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={2} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -468,10 +464,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
@@ -495,7 +491,7 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Parent count={1} />
             <Parent count={3} />
@@ -506,7 +502,7 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('1: mount');
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Parent count={2} />
             <Parent count={1} />
@@ -529,14 +525,14 @@ describe('Store', () => {
       const containerB = document.createElement('div');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={3} />, containerA);
-        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+        legacyRender(<Parent key="A" count={3} />, containerA);
+        legacyRender(<Parent key="B" count={2} />, containerB);
       });
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={4} />, containerA);
-        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+        legacyRender(<Parent key="A" count={4} />, containerA);
+        legacyRender(<Parent key="B" count={1} />, containerB);
       });
       expect(store).toMatchSnapshot('2: update');
 
@@ -564,10 +560,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={4} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={4} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -600,7 +593,7 @@ describe('Store', () => {
       );
 
       const container = document.createElement('div');
-      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
       expect(store).toMatchSnapshot('1: loading');
 
       // This test isn't meaningful unless we expand the suspended tree
@@ -609,7 +602,7 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');
 
       act(() => {
-        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+        legacyRender(<Wrapper shouldSuspense={false} />, container);
       });
       expect(store).toMatchSnapshot('2: resolved');
     });
@@ -626,10 +619,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={2} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={2} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -671,7 +661,7 @@ describe('Store', () => {
       const ref = React.createRef();
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper forwardedRef={ref} />,
           document.createElement('div'),
         ),
@@ -711,10 +701,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
@@ -743,9 +733,7 @@ describe('Store', () => {
       const Parent = () => <Child />;
       const Child = () => null;
 
-      act(() =>
-        ReactDOM.render(<SuspenseTree />, document.createElement('div')),
-      );
+      act(() => legacyRender(<SuspenseTree />, document.createElement('div')));
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
@@ -790,9 +778,7 @@ describe('Store', () => {
       const Parent = () => <Child />;
       const Child = () => null;
 
-      act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
-      );
+      act(() => legacyRender(<Grandparent />, document.createElement('div')));
 
       for (let i = 0; i < store.numElements; i++) {
         expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
@@ -805,8 +791,8 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() => {
-        ReactDOM.render(<Grandparent />, document.createElement('div'));
-        ReactDOM.render(<Grandparent />, document.createElement('div'));
+        legacyRender(<Grandparent />, document.createElement('div'));
+        legacyRender(<Grandparent />, document.createElement('div'));
       });
 
       for (let i = 0; i < store.numElements; i++) {
@@ -820,7 +806,7 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Grandparent />
             <Grandparent />
@@ -840,14 +826,14 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() => {
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Grandparent />
             <Grandparent />
           </React.Fragment>,
           document.createElement('div'),
         );
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Grandparent />
             <Grandparent />
@@ -870,10 +856,10 @@ describe('Store', () => {
 
     expect(store.supportsProfiling).toBe(false);
 
-    act(() => ReactDOM.render(<Component />, containerA));
+    act(() => legacyRender(<Component />, containerA));
     expect(store.supportsProfiling).toBe(true);
 
-    act(() => ReactDOM.render(<Component />, containerB));
+    act(() => legacyRender(<Component />, containerB));
     act(() => ReactDOM.unmountComponentAtNode(containerA));
     expect(store.supportsProfiling).toBe(true);
 
@@ -888,7 +874,7 @@ describe('Store', () => {
     // This is pretty hacky.
     const fauxElement = Object.assign({}, <Child />, {key: 123});
 
-    act(() => ReactDOM.render([fauxElement], document.createElement('div')));
+    act(() => legacyRender([fauxElement], document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
   });
 
@@ -949,12 +935,12 @@ describe('Store', () => {
     const container = document.createElement('div');
 
     // Render once to start fetching the lazy component
-    act(() => ReactDOM.render(<App />, container));
+    act(() => legacyRender(<App />, container));
 
     await Promise.resolve();
 
     // Render again after it resolves
-    act(() => ReactDOM.render(<App />, container));
+    act(() => legacyRender(<App />, container));
 
     expect(store).toMatchInlineSnapshot(`
       [root]
@@ -1004,19 +990,19 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       // Render once to start fetching the lazy component
-      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+      act(() => legacyRender(<App renderChildren={true} />, container));
 
       expect(store).toMatchSnapshot('1: mounted + loading');
 
       await Promise.resolve();
 
       // Render again after it resolves
-      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+      act(() => legacyRender(<App renderChildren={true} />, container));
 
       expect(store).toMatchSnapshot('2: mounted + loaded');
 
       // Render again to unmount it
-      act(() => ReactDOM.render(<App renderChildren={false} />, container));
+      act(() => legacyRender(<App renderChildren={false} />, container));
 
       expect(store).toMatchSnapshot('3: unmounted');
     });
@@ -1047,12 +1033,12 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       // Render once to start fetching the lazy component
-      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+      act(() => legacyRender(<App renderChildren={true} />, container));
 
       expect(store).toMatchSnapshot('1: mounted + loading');
 
       // Render again to unmount it before it finishes loading
-      act(() => ReactDOM.render(<App renderChildren={false} />, container));
+      act(() => legacyRender(<App renderChildren={false} />, container));
 
       expect(store).toMatchSnapshot('2: unmounted');
     });
@@ -1083,7 +1069,7 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example />, container));
+        act(() => legacyRender(<Example />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1093,7 +1079,7 @@ describe('Store', () => {
       `);
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example rerender={1} />, container));
+        act(() => legacyRender(<Example rerender={1} />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1114,7 +1100,7 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example />, container));
+        act(() => legacyRender(<Example />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1124,7 +1110,7 @@ describe('Store', () => {
       `);
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example rerender={1} />, container));
+        act(() => legacyRender(<Example rerender={1} />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1156,7 +1142,7 @@ describe('Store', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () => {
           act(() => {
-            ReactDOM.render(<Example />, container);
+            legacyRender(<Example />, container);
           }, false);
         });
         flushPendingBridgeOperations();
@@ -1194,7 +1180,7 @@ describe('Store', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () => {
           act(() => {
-            ReactDOM.render(
+            legacyRender(
               <>
                 <Example />
               </>,
@@ -1209,7 +1195,7 @@ describe('Store', () => {
 
           // Before warnings and errors have flushed, flush another commit.
           act(() => {
-            ReactDOM.render(
+            legacyRender(
               <>
                 <Example />
                 <Noop />
@@ -1252,7 +1238,7 @@ describe('Store', () => {
       withErrorsOrWarningsIgnored(
         ['Warning: Each child in a list should have a unique "key" prop'],
         () => {
-          act(() => ReactDOM.render(<Example />, container));
+          act(() => legacyRender(<Example />, container));
         },
       );
 
@@ -1273,7 +1259,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example />
               <Example />
@@ -1314,7 +1300,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example />
               <Example />
@@ -1359,7 +1345,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example />
               <Example />
@@ -1412,7 +1398,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithError />
               <ComponentWithWarning />
@@ -1432,7 +1418,7 @@ describe('Store', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithWarning />
               <ComponentWithWarningAndError />
@@ -1450,7 +1436,7 @@ describe('Store', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithWarning />
             </React.Fragment>,
@@ -1465,7 +1451,7 @@ describe('Store', () => {
       `);
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<React.Fragment />, container));
+        act(() => legacyRender(<React.Fragment />, container));
       });
       expect(store).toMatchInlineSnapshot(`[root]`);
       expect(store.errorCount).toBe(0);
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index 7468eb48d1..baa19e0787 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('Store component filters', () => {
   let React;
-  let ReactDOM;
   let Types;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
   let internalAct;
@@ -34,10 +34,11 @@ describe('Store component filters', () => {
     store.recordChangeDescriptions = true;
 
     React = require('react');
-    ReactDOM = require('react-dom');
     Types = require('react-devtools-shared/src/types');
     utils = require('./utils');
     internalAct = require('jest-react').act;
+
+    legacyRender = utils.legacyRender;
   });
 
   it('should throw if filters are updated while profiling', () => {
@@ -56,7 +57,7 @@ describe('Store component filters', () => {
     const FunctionComponent = () => <div>Hi</div>;
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <ClassComponent>
           <FunctionComponent />
         </ClassComponent>,
@@ -137,7 +138,7 @@ describe('Store component filters', () => {
   it('should ignore invalid ElementTypeRoot filter', () => {
     const Component = () => <div>Hi</div>;
 
-    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    act(() => legacyRender(<Component />, document.createElement('div')));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Component>
@@ -165,7 +166,7 @@ describe('Store component filters', () => {
     const Baz = () => <Text label="baz" />;
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <React.Fragment>
           <Foo />
           <Bar />
@@ -221,7 +222,7 @@ describe('Store component filters', () => {
   it('should filter by path', () => {
     const Component = () => <div>Hi</div>;
 
-    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    act(() => legacyRender(<Component />, document.createElement('div')));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Component>
@@ -258,7 +259,7 @@ describe('Store component filters', () => {
     const Bar = () => <Foo />;
     Bar.displayName = 'Bar(Foo(Component))';
 
-    act(() => ReactDOM.render(<Bar />, document.createElement('div')));
+    act(() => legacyRender(<Bar />, document.createElement('div')));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Component> [Bar][Foo]
@@ -337,7 +338,7 @@ describe('Store component filters', () => {
     ];
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
+    act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Wrapper>
@@ -345,14 +346,14 @@ describe('Store component filters', () => {
               <div>
     `);
 
-    act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
+    act(() => legacyRender(<Wrapper shouldSuspend={false} />, container));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Wrapper>
             <Component>
     `);
 
-    act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
+    act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Wrapper>
@@ -376,6 +377,14 @@ describe('Store component filters', () => {
         console.warn('test-only: render warning');
         return null;
       }
+
+      // HACK This require() is needed (somewhere in the test) for this case to pass.
+      // Without it, the legacyRender() call below causes this test to fail
+      // because it requires "react-dom" for the first time,
+      // which causes the console error() and warn() methods to be overridden again,
+      // effectively disconnecting the DevTools override in 'react-devtools-shared/src/backend/console'.
+      require('react-dom');
+
       const container = document.createElement('div');
       utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(
@@ -386,7 +395,7 @@ describe('Store component filters', () => {
             ]),
         );
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithError />
               <ComponentWithWarning />
diff --git a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
index c380d8b91a..183245a04f 100644
--- a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
@@ -11,8 +11,8 @@ const {printOwnersList} = require('../devtools/utils');
 
 describe('Store owners list', () => {
   let React;
-  let ReactDOM;
   let act;
+  let legacyRender;
   let store;
 
   beforeEach(() => {
@@ -20,8 +20,10 @@ describe('Store owners list', () => {
     store.collapseNodesByDefault = false;
 
     React = require('react');
-    ReactDOM = require('react-dom');
-    act = require('./utils').act;
+
+    const utils = require('./utils');
+    act = utils.act;
+    legacyRender = utils.legacyRender;
   });
 
   it('should drill through intermediate components', () => {
@@ -36,7 +38,7 @@ describe('Store owners list', () => {
     const Leaf = () => <div>Leaf</div>;
     const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
 
-    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    act(() => legacyRender(<Root />, document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
 
     const rootID = store.getElementIDAtIndex(0);
@@ -64,7 +66,7 @@ describe('Store owners list', () => {
       <Wrapper key="wrapper">{children}</Wrapper>,
     ];
 
-    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    act(() => legacyRender(<Root />, document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
 
     const rootID = store.getElementIDAtIndex(0);
@@ -96,7 +98,7 @@ describe('Store owners list', () => {
     const container = document.createElement('div');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={false} includeIndirect={true} />,
         container,
       ),
@@ -109,7 +111,7 @@ describe('Store owners list', () => {
     ).toMatchSnapshot('2: components owned by <Root>');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={true} includeIndirect={true} />,
         container,
       ),
@@ -121,7 +123,7 @@ describe('Store owners list', () => {
     ).toMatchSnapshot('4: components owned by <Root>');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={true} includeIndirect={false} />,
         container,
       ),
@@ -133,7 +135,7 @@ describe('Store owners list', () => {
     ).toMatchSnapshot('6: components owned by <Root>');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={false} includeIndirect={false} />,
         container,
       ),
@@ -153,7 +155,7 @@ describe('Store owners list', () => {
     const Leaf = () => <div>Leaf</div>;
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Root ascending={true} />, container));
+    act(() => legacyRender(<Root ascending={true} />, container));
     expect(store).toMatchSnapshot('1: mount (ascending)');
 
     const rootID = store.getElementIDAtIndex(0);
@@ -161,7 +163,7 @@ describe('Store owners list', () => {
       printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('2: components owned by <Root>');
 
-    act(() => ReactDOM.render(<Root ascending={false} />, container));
+    act(() => legacyRender(<Root ascending={false} />, container));
     expect(store).toMatchSnapshot('3: update (descending)');
 
     expect(
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
index 587bef95af..f1684b87b7 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -14,6 +14,7 @@ describe('StoreStress (Legacy Mode)', () => {
   let bridge;
   let store;
   let print;
+  let legacyRender;
 
   beforeEach(() => {
     bridge = global.bridge;
@@ -22,7 +23,10 @@ describe('StoreStress (Legacy Mode)', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('./utils').act;
+
+    const utils = require('./utils');
+    act = utils.act;
+    legacyRender = utils.legacyRender;
 
     print = require('./storeSerializer').print;
   });
@@ -56,7 +60,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
     // 1. Render a normal version of [a, b, c, d, e].
     let container = document.createElement('div');
-    act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));
+    act(() => legacyRender(<Parent>{[a, b, c, d, e]}</Parent>, container));
     expect(store).toMatchSnapshot('1: abcde');
     expect(container.textContent).toMatch('abcde');
     const snapshotForABCDE = print(store);
@@ -119,7 +123,7 @@ describe('StoreStress (Legacy Mode)', () => {
       container = document.createElement('div');
 
       // Verify mounting 'abcde'.
-      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
       expect(container.textContent).toMatch('abcde');
       expect(print(store)).toEqual(snapshotForABCDE);
 
@@ -147,7 +151,7 @@ describe('StoreStress (Legacy Mode)', () => {
     container = document.createElement('div');
     for (let i = 0; i < cases.length; i++) {
       // Verify mounting 'abcde'.
-      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
       expect(container.textContent).toMatch('abcde');
       expect(print(store)).toEqual(snapshotForABCDE);
 
@@ -210,7 +214,7 @@ describe('StoreStress (Legacy Mode)', () => {
     const snapshots = [];
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
-      act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+      act(() => legacyRender(<Root>{steps[i]}</Root>, container));
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
       snapshots.push(print(store));
@@ -222,11 +226,11 @@ describe('StoreStress (Legacy Mode)', () => {
     for (let i = 0; i < steps.length; i++) {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
-        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        act(() => legacyRender(<Root>{steps[i]}</Root>, container));
         expect(print(store)).toMatch(snapshots[i]);
-        act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
+        act(() => legacyRender(<Root>{steps[j]}</Root>, container));
         expect(print(store)).toMatch(snapshots[j]);
-        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        act(() => legacyRender(<Root>{steps[i]}</Root>, container));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => ReactDOM.unmountComponentAtNode(container));
         expect(print(store)).toBe('');
@@ -238,7 +242,7 @@ describe('StoreStress (Legacy Mode)', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <div>{steps[i]}</div>
             </Root>,
@@ -247,7 +251,7 @@ describe('StoreStress (Legacy Mode)', () => {
         );
         expect(print(store)).toMatch(snapshots[i]);
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <div>{steps[j]}</div>
             </Root>,
@@ -256,7 +260,7 @@ describe('StoreStress (Legacy Mode)', () => {
         );
         expect(print(store)).toMatch(snapshots[j]);
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <div>{steps[i]}</div>
             </Root>,
@@ -312,7 +316,7 @@ describe('StoreStress (Legacy Mode)', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -331,7 +335,7 @@ describe('StoreStress (Legacy Mode)', () => {
     // 2. Verify check Suspense can render same steps as initial fallback content.
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={steps[i]}>
@@ -355,7 +359,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -367,7 +371,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
@@ -380,7 +384,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -402,7 +406,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -418,7 +422,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -435,7 +439,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -461,7 +465,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -473,7 +477,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -490,7 +494,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -512,7 +516,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -528,7 +532,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
@@ -541,7 +545,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -567,7 +571,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
@@ -605,7 +609,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Trigger actual fallback.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -633,7 +637,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Switch to primary mode.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
@@ -723,7 +727,7 @@ describe('StoreStress (Legacy Mode)', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={z}>
@@ -747,7 +751,7 @@ describe('StoreStress (Legacy Mode)', () => {
     const fallbackSnapshots = [];
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={steps[i]}>
@@ -773,7 +777,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -787,7 +791,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -802,7 +806,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -826,7 +830,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -845,7 +849,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -865,7 +869,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -894,7 +898,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -908,7 +912,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -923,7 +927,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -947,7 +951,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -961,7 +965,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -976,7 +980,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -1000,7 +1004,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -1040,7 +1044,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Trigger actual fallback.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -1066,7 +1070,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Switch to primary mode.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 36f615c115..0db248c017 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -20,6 +20,7 @@ describe('TreeListContext', () => {
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
   let withErrorsOrWarningsIgnored;
@@ -35,6 +36,7 @@ describe('TreeListContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
 
     bridge = global.bridge;
@@ -88,7 +90,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -214,7 +216,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -300,7 +302,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -391,7 +393,7 @@ describe('TreeListContext', () => {
 
       const container = document.createElement('div');
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Grandparent>
             <Parent>
               <Child />
@@ -425,7 +427,7 @@ describe('TreeListContext', () => {
 
       // Remove the child (which should auto-select the parent)
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <Grandparent>
             <Parent />
           </Grandparent>,
@@ -458,7 +460,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -619,7 +621,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -918,7 +920,7 @@ describe('TreeListContext', () => {
       Qux.displayName = `withHOC(${Qux.name})`;
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -990,7 +992,7 @@ describe('TreeListContext', () => {
       const Baz = () => null;
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Baz />
@@ -1097,7 +1099,7 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1123,7 +1125,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1158,7 +1160,7 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1196,7 +1198,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1242,7 +1244,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -1283,7 +1285,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       const container = document.createElement('div');
-      utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      utils.act(() => legacyRender(<Grandparent count={2} />, container));
 
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
@@ -1306,7 +1308,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(<Grandparent count={1} />, container),
+        legacyRender(<Grandparent count={1} />, container),
       );
       expect(state).toMatchInlineSnapshot(`
         [owners]
@@ -1315,7 +1317,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(<Grandparent count={0} />, container),
+        legacyRender(<Grandparent count={0} />, container),
       );
       expect(state).toMatchInlineSnapshot(`
         [owners]
@@ -1329,7 +1331,7 @@ describe('TreeListContext', () => {
 
       const container = document.createElement('div');
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Parent>
             <Child />
           </Parent>,
@@ -1353,7 +1355,7 @@ describe('TreeListContext', () => {
         →    <Child>
       `);
 
-      await utils.actAsync(() => ReactDOM.render(<Parent />, container));
+      await utils.actAsync(() => legacyRender(<Parent />, container));
       expect(state).toMatchInlineSnapshot(`
         [root]
         →    <Parent>
@@ -1386,7 +1388,7 @@ describe('TreeListContext', () => {
       );
 
       const container = document.createElement('div');
-      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
 
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
@@ -1493,7 +1495,7 @@ describe('TreeListContext', () => {
 
     it('should handle when there are no errors/warnings', () => {
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Child />
             <Child />
@@ -1556,7 +1558,7 @@ describe('TreeListContext', () => {
     it('should cycle through the next errors/warnings and wrap around', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -1617,7 +1619,7 @@ describe('TreeListContext', () => {
     it('should cycle through the previous errors/warnings and wrap around', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -1678,14 +1680,14 @@ describe('TreeListContext', () => {
     it('should cycle through the next errors/warnings and wrap around with multiple roots', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         utils.act(() => {
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />,
             </React.Fragment>,
             document.createElement('div'),
           );
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logError={true} />
@@ -1748,14 +1750,14 @@ describe('TreeListContext', () => {
     it('should cycle through the previous errors/warnings and wrap around with multiple roots', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         utils.act(() => {
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />,
             </React.Fragment>,
             document.createElement('div'),
           );
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logError={true} />
@@ -1818,7 +1820,7 @@ describe('TreeListContext', () => {
     it('should select the next or previous element relative to the current selection', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -1880,7 +1882,7 @@ describe('TreeListContext', () => {
     it('should update correctly when errors/warnings are cleared for a fiber in the list', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child logError={true} />
@@ -1953,7 +1955,7 @@ describe('TreeListContext', () => {
     it('should update correctly when errors/warnings are cleared for the currently selected fiber', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child logError={true} />
@@ -1994,7 +1996,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child />
@@ -2028,7 +2030,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -2074,7 +2076,7 @@ describe('TreeListContext', () => {
     it('should update correctly when all errors/warnings are cleared', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child logError={true} />
@@ -2124,7 +2126,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Wrapper>
                 <Child logWarning={true} />
@@ -2174,7 +2176,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Wrapper>
                 <Child logWarning={true} />
@@ -2260,7 +2262,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Wrapper>
                 <Child logWarning={true} />
@@ -2318,7 +2320,7 @@ describe('TreeListContext', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={null}>
                 <Child logWarning={true} />
                 <NeverResolves />
@@ -2354,7 +2356,7 @@ describe('TreeListContext', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={null}>
                 <Child logWarning={true} />
                 <LazyComponent />
@@ -2373,7 +2375,7 @@ describe('TreeListContext', () => {
         await Promise.resolve();
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={null}>
                 <Child logWarning={true} />
                 <LazyComponent />
@@ -2404,7 +2406,7 @@ describe('TreeListContext', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={<Fallback />}>
                 <LazyComponent />
               </React.Suspense>,
@@ -2425,7 +2427,7 @@ describe('TreeListContext', () => {
         await Promise.resolve();
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={<Fallback />}>
                 <LazyComponent />
               </React.Suspense>,
@@ -2469,7 +2471,7 @@ describe('TreeListContext', () => {
           ['test-only:', 'React will try to recreate this component tree'],
           () => {
             utils.act(() =>
-              ReactDOM.render(
+              legacyRender(
                 <ErrorBoundary>
                   <BadRender />
                 </ErrorBoundary>,
@@ -2533,7 +2535,7 @@ describe('TreeListContext', () => {
           ['test-only:', 'React will try to recreate this component tree'],
           () => {
             utils.act(() =>
-              ReactDOM.render(
+              legacyRender(
                 <ErrorBoundary>
                   <LogsWarning />
                 </ErrorBoundary>,
@@ -2592,7 +2594,7 @@ describe('TreeListContext', () => {
           ['test-only:', 'React will try to recreate this component tree'],
           () => {
             utils.act(() =>
-              ReactDOM.render(
+              legacyRender(
                 <ErrorBoundary>
                   <BadRender />
                 </ErrorBoundary>,
diff --git a/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js b/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
index db22d2813e..018089c8fc 100644
--- a/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
+++ b/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
@@ -10,15 +10,15 @@
 describe('useEditableValue', () => {
   let act;
   let React;
-  let ReactDOM;
+  let legacyRender;
   let useEditableValue;
 
   beforeEach(() => {
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
 
     React = require('react');
-    ReactDOM = require('react-dom');
 
     useEditableValue = require('../devtools/views/hooks').useEditableValue;
   });
@@ -33,7 +33,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example />, container);
+    legacyRender(<Example />, container);
     expect(state.editableValue).toEqual('NaN');
     expect(state.externalValue).toEqual(NaN);
     expect(state.parsedValue).toEqual(NaN);
@@ -51,7 +51,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
@@ -60,7 +60,7 @@ describe('useEditableValue', () => {
 
     // If there are NO pending changes,
     // an update to the external prop value should override the local/pending value.
-    ReactDOM.render(<Example value={2} />, container);
+    legacyRender(<Example value={2} />, container);
     expect(state.editableValue).toEqual('2');
     expect(state.externalValue).toEqual(2);
     expect(state.parsedValue).toEqual(2);
@@ -79,7 +79,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
@@ -102,7 +102,7 @@ describe('useEditableValue', () => {
 
     // If there ARE pending changes,
     // an update to the external prop value should NOT override the local/pending value.
-    ReactDOM.render(<Example value={3} />, container);
+    legacyRender(<Example value={3} />, container);
     expect(state.editableValue).toEqual('2');
     expect(state.externalValue).toEqual(3);
     expect(state.parsedValue).toEqual(2);
@@ -121,7 +121,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
@@ -154,7 +154,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 61a6acc604..74fcebc441 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -162,6 +162,16 @@ export function getRendererID(): number {
   return parseInt(id, 10);
 }
 
+export function legacyRender(elements, container) {
+  const ReactDOM = require('react-dom');
+  withErrorsOrWarningsIgnored(
+    ['ReactDOM.render is no longer supported in React 18'],
+    () => {
+      ReactDOM.render(elements, container);
+    },
+  );
+}
+
 export function requireTestRenderer(): ReactTestRenderer {
   let hook;
   try {
@@ -228,9 +238,15 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
   errorOrWarningMessages: string[],
   fn: () => T,
 ): T {
+  // withErrorsOrWarningsIgnored() may be nested.
+  const prev = global._ignoredErrorOrWarningMessages || [];
+
   let resetIgnoredErrorOrWarningMessages = true;
   try {
-    global._ignoredErrorOrWarningMessages = errorOrWarningMessages;
+    global._ignoredErrorOrWarningMessages = [
+      ...prev,
+      ...errorOrWarningMessages,
+    ];
     const maybeThenable = fn();
     if (
       maybeThenable !== undefined &&
@@ -239,16 +255,16 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
       resetIgnoredErrorOrWarningMessages = false;
       return maybeThenable.then(
         () => {
-          global._ignoredErrorOrWarningMessages = [];
+          global._ignoredErrorOrWarningMessages = prev;
         },
         () => {
-          global._ignoredErrorOrWarningMessages = [];
+          global._ignoredErrorOrWarningMessages = prev;
         },
       );
     }
   } finally {
     if (resetIgnoredErrorOrWarningMessages) {
-      global._ignoredErrorOrWarningMessages = [];
+      global._ignoredErrorOrWarningMessages = prev;
     }
   }
 }