feat(examples): replace react-test-renderer reference with @testing-library/react for snapshot testing (#15806)

Author: hainenber

docs/SnapshotTesting.md

@@ -9,17 +9,17 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp
 
 ## Snapshot Testing with Jest
 
-A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/jestjs/jest/blob/main/examples/snapshot/__tests__/link.test.js) for a [Link component](https://github.com/jestjs/jest/blob/main/examples/snapshot/Link.js):
+A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React component. Consider this [example test](https://github.com/jestjs/jest/blob/main/examples/snapshot/__tests__/link.test.js) for a [Link component](https://github.com/jestjs/jest/blob/main/examples/snapshot/Link.js):
 
 ```tsx
-import renderer from 'react-test-renderer';
+import {render} from '@testing-library/react';
 import Link from '../Link';
 
 it('renders correctly', () => {
-  const tree = renderer
-    .create(<Link page="http://www.facebook.com">Facebook</Link>)
-    .toJSON();
-  expect(tree).toMatchSnapshot();
+  const {container} = render(
+    <Link page="http://www.facebook.com">Facebook</Link>,
+  );
+  expect(container.firstChild).toMatchSnapshot();
 });
 ```
 
@@ -28,10 +28,9 @@ The first time this test is run, Jest creates a [snapshot file](https://github.c
 ```javascript
 exports[`renders correctly 1`] = `
 <a
-  className="normal"
+  aria-label="normal
+  class="normal"
   href="http://www.facebook.com"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
 >
   Facebook
 </a>
@@ -61,10 +60,10 @@ One such situation can arise if we intentionally change the address the Link com
 ```tsx
 // Updated test case with a Link to a different address
 it('renders correctly', () => {
-  const tree = renderer
-    .create(<Link page="http://www.instagram.com">Instagram</Link>)
-    .toJSON();
-  expect(tree).toMatchSnapshot();
+  const {container} = render(
+    <Link page="http://www.instagram.com">Instagram</Link>,
+  );
+  expect(container.firstChild).toMatchSnapshot();
 });
 ```
 
@@ -112,26 +111,25 @@ First, you write a test, calling `.toMatchInlineSnapshot()` with no arguments:
 
 ```tsx
 it('renders correctly', () => {
-  const tree = renderer
-    .create(<Link page="https://example.com">Example Site</Link>)
-    .toJSON();
-  expect(tree).toMatchInlineSnapshot();
+  const {container} = render(
+    <Link page="https://example.com">Example Site</Link>,
+  );
+  expect(container.firstChild).toMatchInlineSnapshot();
 });
 ```
 
 The next time you run Jest, `tree` will be evaluated, and a snapshot will be written as an argument to `toMatchInlineSnapshot`:
 
 ```tsx
 it('renders correctly', () => {
-  const tree = renderer
-    .create(<Link page="https://example.com">Example Site</Link>)
-    .toJSON();
-  expect(tree).toMatchInlineSnapshot(`
+  const {container} = render(
+    <Link page="https://example.com">Example Site</Link>,
+  );
+  expect(container.firstChild).toMatchInlineSnapshot(`
     <a
+      aria-label="normal"
       className="normal"
       href="https://example.com"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
     >
       Example Site
     </a>

e2e/__tests__/toMatchInlineSnapshotWithJSX.test.ts

@@ -27,13 +27,15 @@ const babelConfig = {
 
 const pkg: PackageJson = {
   dependencies: {
-    react: '^17.0.0',
+    react: '^18.0.0',
+    'react-dom': '^18.0.0',
   },
   devDependencies: {
     '@babel/core': '^7.14.4',
     '@babel/preset-env': '^7.14.4',
     '@babel/preset-react': '^7.13.13',
-    'react-test-renderer': '^17.0.2',
+    '@testing-library/dom': '^10.4.1',
+    '@testing-library/react': '^16.3.0',
   },
   jest: {
     testEnvironment: 'jsdom',
@@ -48,10 +50,10 @@ beforeEach(() => {
   writeFiles(DIR, {
     '__tests__/MismatchingSnapshot.test.js': `
       import React from 'react';
-      import renderer from 'react-test-renderer';
+      import {render} from '@testing-library/react';
 
       test('<div>x</div>', () => {
-        expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(\`
+        expect(render(<div>x</div>).container.firstChild).toMatchInlineSnapshot(\`
           <div>
             y
           </div>
@@ -94,13 +96,13 @@ it('successfully runs the tests with external babel config', () => {
 
           3 |
           4 | test('<div>x</div>', () => {
-        > 5 |   expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(\`
-            |                                                  ^
+        > 5 |   expect(render(<div>x</div>).container.firstChild).toMatchInlineSnapshot(\`
+            |                                                     ^
           6 |     <div>
           7 |       y
           8 |     </div>
 
-          at Object.toMatchInlineSnapshot (__tests__/MismatchingSnapshot.test.js:5:50)
+          at Object.toMatchInlineSnapshot (__tests__/MismatchingSnapshot.test.js:5:53)
     "
   `);
 
@@ -143,13 +145,13 @@ it('successfully runs the tests with inline babel config', () => {
 
           3 |
           4 | test('<div>x</div>', () => {
-        > 5 |   expect(renderer.create(<div>x</div>).toJSON()).toMatchInlineSnapshot(\`
-            |                                                  ^
+        > 5 |   expect(render(<div>x</div>).container.firstChild).toMatchInlineSnapshot(\`
+            |                                                     ^
           6 |     <div>
           7 |       y
           8 |     </div>
 
-          at Object.toMatchInlineSnapshot (__tests__/MismatchingSnapshot.test.js:5:50)
+          at Object.toMatchInlineSnapshot (__tests__/MismatchingSnapshot.test.js:5:53)
     "
   `);
 

e2e/transform/multiple-transformers/__tests__/__snapshots__/multipleTransformers.test.js.snap

@@ -2,22 +2,22 @@
 
 exports[`generates a snapshot with correctly transformed dependencies 1`] = `
 <div
-  className="App-root"
+  class="App-root"
 >
   <div
-    className="App-header"
+    class="App-header"
   >
     <img
       alt="logo"
-      className="App-logo"
+      class="App-logo"
       src="logo.svg"
     />
     <h2>
       Welcome to React
     </h2>
   </div>
   <p
-    className="App-intro"
+    class="App-intro"
   >
     To get started, edit 
     <code>

e2e/transform/multiple-transformers/__tests__/multipleTransformers.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -6,10 +10,10 @@
  */
 
 import React from 'react';
-import renderer from 'react-test-renderer';
+import {render} from '@testing-library/react';
 import App from '../src/App';
 
 it('generates a snapshot with correctly transformed dependencies', () => {
-  const tree = renderer.create(<App />).toJSON();
-  expect(tree).toMatchSnapshot();
+  const {container} = render(<App />);
+  expect(container.firstChild).toMatchSnapshot();
 });

e2e/transform/multiple-transformers/package.json

@@ -17,8 +17,8 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/react": "^16.3.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-test-renderer": "18.2.0"
+    "react-dom": "18.2.0"
   }
 }

e2e/transform/multiple-transformers/yarn.lock

@@ -1131,6 +1131,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.12.5":
+  version: 7.28.3
+  resolution: "@babel/runtime@npm:7.28.3"
+  checksum: 10/f2415e4dbface7496f6fc561d640b44be203071fb0dfb63fbe338c7d2d2047419cb054ef13d1ebb8fc11e35d2b55aa3045def4b985e8b82aea5d7e58e1133e52
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.27.1":
   version: 7.27.2
   resolution: "@babel/template@npm:7.27.2"
@@ -1209,6 +1216,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:^16.3.0":
+  version: 16.3.0
+  resolution: "@testing-library/react@npm:16.3.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/0ee9e31dd0d2396a924682d0e61a4ecc6bfab8eaff23dbf8a72c3c2ce22c116fa578148baeb4de75b968ef99d22e6e6aa0a00dba40286f71184918bb6bb5b06a
+  languageName: node
+  linkType: hard
+
 "babel-plugin-polyfill-corejs2@npm:^0.4.10":
   version: 0.4.13
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.13"
@@ -1429,13 +1456,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "object-assign@npm:4.1.1"
-  checksum: 10/fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
-  languageName: node
-  linkType: hard
-
 "path-parse@npm:^1.0.7":
   version: 1.0.7
   resolution: "path-parse@npm:1.0.7"
@@ -1462,38 +1482,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react-is@npm:18.3.1"
-  checksum: 10/d5f60c87d285af24b1e1e7eaeb123ec256c3c8bdea7061ab3932e3e14685708221bf234ec50b21e10dd07f008f1b966a2730a0ce4ff67905b3872ff2042aec22
-  languageName: node
-  linkType: hard
-
-"react-shallow-renderer@npm:^16.15.0":
-  version: 16.15.0
-  resolution: "react-shallow-renderer@npm:16.15.0"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^16.12.0 || ^17.0.0 || ^18.0.0"
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/06457fe5bcaa44aeca998905b6849304742ea1cc2d3841e4a0964c745ff392bc4dec07f8c779f317faacce3a0bf6f84e15020ac0fa81adb931067dbb0baf707b
-  languageName: node
-  linkType: hard
-
-"react-test-renderer@npm:18.2.0":
-  version: 18.2.0
-  resolution: "react-test-renderer@npm:18.2.0"
-  dependencies:
-    react-is: "npm:^18.2.0"
-    react-shallow-renderer: "npm:^16.15.0"
-    scheduler: "npm:^0.23.0"
-  peerDependencies:
-    react: ^18.2.0
-  checksum: 10/39473e43f64eec92da35db9d4411f3887b368038670787d49dd23172eb3a29953eb13767d1bfa34cbe2665b6e25632cad146e362e8910ce33755d343537763ae
-  languageName: node
-  linkType: hard
-
 "react@npm:18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -1584,9 +1572,9 @@ __metadata:
     "@babel/core": "npm:^7.0.0"
     "@babel/preset-env": "npm:^7.0.0"
     "@babel/preset-react": "npm:^7.0.0"
+    "@testing-library/react": "npm:^16.3.0"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
-    react-test-renderer: "npm:18.2.0"
   languageName: unknown
   linkType: soft
 

examples/react-testing-library/package.json

@@ -10,7 +10,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.0",
     "babel-jest": "workspace:*",
     "jest": "workspace:*",
     "jest-environment-jsdom": "workspace:*"

examples/snapshot/Link.js

@@ -20,6 +20,7 @@ export default function Link({page, children}) {
 
   return (
     <a
+      aria-label={status}
       className={status}
       href={page || '#'}
       onMouseEnter={onMouseEnter}