Merge pull request #13738 from MatanBobi/chores/update-rtl-version-rtl-16

fix: upgrade RTL version to avoid peer-deps mismatch

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 />);
 });
 ```
 
@@ -92,13 +92,13 @@ If you’d like to test components in isolation from the child components they r
 To install `react-testing-library` and `jest-dom`, you can run:
 
 ```sh
-npm install --save @testing-library/react @testing-library/jest-dom
+npm install --save @testing-library/react @testing-library/dom @testing-library/jest-dom
 ```
 
 Alternatively you may use `yarn`:
 
 ```sh
-yarn add @testing-library/react @testing-library/jest-dom
+yarn add @testing-library/react @testing-library/dom @testing-library/jest-dom
 ```
 
 If you want to avoid boilerplate in your test files, you can create a [`src/setupTests.js`](#initializing-test-environment) file:

package-lock.json

@@ -1,13 +1,14 @@
 {
   "package": {
     "dependencies": {
-      "@testing-library/jest-dom": "^5.14.1",
-      "@testing-library/react": "^13.0.0",
+      "@testing-library/dom": "^10.4.0",
+      "@testing-library/jest-dom": "^6.6.3",
+      "@testing-library/react": "^16.1.0",
       "@testing-library/user-event": "^13.2.1",
       "@types/jest": "^27.0.1",
       "@types/node": "^16.7.13",
-      "@types/react": "^18.0.0",
-      "@types/react-dom": "^18.0.0",
+      "@types/react": "^19.0.0",
+      "@types/react-dom": "^19.0.0",
       "typescript": "^4.4.2",
       "web-vitals": "^2.1.0"
     },

packages/cra-template-typescript/template.json

@@ -1,8 +1,9 @@
 {
   "package": {
     "dependencies": {
-      "@testing-library/jest-dom": "^5.14.1",
-      "@testing-library/react": "^13.0.0",
+      "@testing-library/dom": "^10.4.0",
+      "@testing-library/jest-dom": "^6.6.3",
+      "@testing-library/react": "^16.1.0",
       "@testing-library/user-event": "^13.2.1",
       "web-vitals": "^2.1.0"
     },

packages/cra-template/template.json

@@ -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/config/BaseUrl.test.js

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

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

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

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

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

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

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

packages/react-scripts/fixtures/kitchensink/template/src/features/env/ShellEnvVariables.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/ArrayDestructuring.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/ArraySpread.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/AsyncAwait.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/ClassProperties.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/ComputedProperties.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/CustomInterpolation.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} />
+      );
     });
   });
 });