Fix e2e tests

Author: rickhanlonii

docusaurus/docs/running-tests.md

@@ -72,12 +72,12 @@ Different projects choose different testing tradeoffs based on how often compone
 
 ```js
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import App from './App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOMClient.createRoot(div).render(<App />);
 });
 ```
 

packages/react-scripts/fixtures/kitchensink/template/src/features/config/BaseUrl.test.js

@@ -6,14 +6,14 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import NodePath from './BaseUrl';
 
 describe('BASE_URL', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<NodePath onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(<NodePath onReady={resolve} />);
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/ExpandEnvVariables.test.js

@@ -6,12 +6,12 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import ExpandEnvVariables from './ExpandEnvVariables';
 
 describe('expand .env variables', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ExpandEnvVariables />, div);
+    ReactDOMClient.createRoot(div).render(<ExpandEnvVariables />);
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/FileEnvVariables.test.js

@@ -6,12 +6,12 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import FileEnvVariables from './FileEnvVariables';
+import ReactDOMClient from 'react-dom/client';
 
 describe('.env variables', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<FileEnvVariables />, div);
+    ReactDOMClient.createRoot(div).render(<FileEnvVariables />);
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/PublicUrl.test.js

@@ -6,12 +6,12 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PublicUrl from './PublicUrl';
+import ReactDOMClient from 'react-dom/client';
 
 describe('PUBLIC_URL', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<PublicUrl />, div);
+    ReactDOMClient.createRoot(div).render(<PublicUrl />);
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/env/ShellEnvVariables.test.js

@@ -6,12 +6,12 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ShellEnvVariables from './ShellEnvVariables';
+import ReactDOMClient from 'react-dom/client';
 
 describe('shell env variables', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ShellEnvVariables />, div);
+    ReactDOMClient.createRoot(div).render(<ShellEnvVariables />);
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ArrayDestructuring.test.js

@@ -6,14 +6,16 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ArrayDestructuring from './ArrayDestructuring';
+import ReactDOMClient from 'react-dom/client';
 
 describe('array destructuring', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<ArrayDestructuring onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(
+        <ArrayDestructuring onReady={resolve} />
+      );
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ArraySpread.test.js

@@ -6,14 +6,14 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ArraySpread from './ArraySpread';
+import ReactDOMClient from 'react-dom/client';
 
 describe('array spread', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<ArraySpread onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(<ArraySpread onReady={resolve} />);
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/AsyncAwait.test.js

@@ -6,14 +6,14 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import AsyncAwait from './AsyncAwait';
+import ReactDOMClient from 'react-dom/client';
 
 describe('async/await', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<AsyncAwait onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(<AsyncAwait onReady={resolve} />);
     });
   });
 });

packages/react-scripts/fixtures/kitchensink/template/src/features/syntax/ClassProperties.test.js

@@ -6,14 +6,16 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import ClassProperties from './ClassProperties';
+import ReactDOMClient from 'react-dom/client';
 
 describe('class properties', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     return new Promise(resolve => {
-      ReactDOM.render(<ClassProperties onReady={resolve} />, div);
+      ReactDOMClient.createRoot(div).render(
+        <ClassProperties onReady={resolve} />
+      );
     });
   });
 });