Fix e2e tests

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} />
+      );
     });
   });
 });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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