DevTools: Update tests to fix warnings/errors (#21748)

Some new ones had slipped in (e.g. deprecated ReactDOM.render message from 18)

Author: Brian Vaughn

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(() => {

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);
 

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:');

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,14 +25,15 @@ describe('editing interface', () => {
   beforeEach(() => {
     utils = require('./utils');
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
     store.componentFilters = [];
 
     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>,