From 5174abd0e4abc0ef78d41484a3654673e8eca9f7 Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Wed, 18 Dec 2024 12:46:36 +0100
Subject: [PATCH] chore: migrate to react-testing library

---
 package.json                                  |   1 -
 pnpm-lock.yaml                                |  26 -----
 src/components/__tests__/Tab-test.js          |   5 +-
 src/components/__tests__/TabList-test.js      |   5 +-
 src/components/__tests__/TabPanel-test.js     |   5 +-
 .../__tests__/__snapshots__/Tab-test.js.snap  |  53 ++++------
 .../__snapshots__/TabList-test.js.snap        | 100 ++++++++----------
 .../__snapshots__/TabPanel-test.js.snap       |  18 ++--
 8 files changed, 85 insertions(+), 128 deletions(-)

diff --git a/package.json b/package.json
index d894a3ceb9..7286ca88a1 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,6 @@
     "react-dom": "18.3.1",
     "react-live": "4.1.8",
     "react-modal": "3.16.3",
-    "react-test-renderer": "18.3.1",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 886889302e..1a9006a431 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -120,9 +120,6 @@ importers:
       react-modal:
         specifier: 3.16.3
         version: 3.16.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-test-renderer:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
       webpack:
         specifier: 5.97.1
         version: 5.97.1(webpack-cli@5.1.4)
@@ -3651,16 +3648,6 @@ packages:
       react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19
       react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19
 
-  react-shallow-renderer@16.15.0:
-    resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==}
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0
-
-  react-test-renderer@18.3.1:
-    resolution: {integrity: sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==}
-    peerDependencies:
-      react: ^18.3.1
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -8630,19 +8617,6 @@ snapshots:
       react-lifecycles-compat: 3.0.4
       warning: 4.0.3
 
-  react-shallow-renderer@16.15.0(react@18.3.1):
-    dependencies:
-      object-assign: 4.1.1
-      react: 18.3.1
-      react-is: 18.3.1
-
-  react-test-renderer@18.3.1(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-is: 18.3.1
-      react-shallow-renderer: 16.15.0(react@18.3.1)
-      scheduler: 0.23.2
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
diff --git a/src/components/__tests__/Tab-test.js b/src/components/__tests__/Tab-test.js
index 6b3d00e6a8..bbf55c7c79 100644
--- a/src/components/__tests__/Tab-test.js
+++ b/src/components/__tests__/Tab-test.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import Tab from '../Tab';
 import { TabWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
-  expect(renderer.create(component).toJSON()).toMatchSnapshot();
+  const { container } = render(component);
+  expect(container.firstChild).toMatchSnapshot();
 }
 
 describe('<Tab />', () => {
diff --git a/src/components/__tests__/TabList-test.js b/src/components/__tests__/TabList-test.js
index ed9552c140..3b0d016186 100644
--- a/src/components/__tests__/TabList-test.js
+++ b/src/components/__tests__/TabList-test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
@@ -16,7 +16,8 @@ jest.mock('react', () => {
 });
 
 function expectToMatchSnapshot(component) {
-  expect(renderer.create(component).toJSON()).toMatchSnapshot();
+  const { container } = render(component);
+  expect(container.firstChild).toMatchSnapshot();
 }
 
 describe('<TabList />', () => {
diff --git a/src/components/__tests__/TabPanel-test.js b/src/components/__tests__/TabPanel-test.js
index b8a7a80994..571a3a3e1f 100644
--- a/src/components/__tests__/TabPanel-test.js
+++ b/src/components/__tests__/TabPanel-test.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import TabPanel from '../TabPanel';
 import { TabPanelWrapper } from './helpers/higherOrder';
 
 function expectToMatchSnapshot(component) {
-  expect(renderer.create(component).toJSON()).toMatchSnapshot();
+  const { container } = render(component);
+  expect(container.firstChild).toMatchSnapshot();
 }
 
 describe('<TabPanel />', () => {
diff --git a/src/components/__tests__/__snapshots__/Tab-test.js.snap b/src/components/__tests__/__snapshots__/Tab-test.js.snap
index ebf635d1bb..8fa291e9cb 100644
--- a/src/components/__tests__/__snapshots__/Tab-test.js.snap
+++ b/src/components/__tests__/__snapshots__/Tab-test.js.snap
@@ -5,11 +5,11 @@ exports[`<Tab /> override the tabIndex if it was provided 1`] = `
   aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
-  className="react-tabs__tab"
-  data-rttab={true}
+  class="react-tabs__tab"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex="0"
+  tabindex="0"
 >
   Hello
 </li>
@@ -20,11 +20,10 @@ exports[`<Tab /> should accept className 1`] = `
   aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
-  className="foobar"
-  data-rttab={true}
+  class="foobar"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex={null}
 />
 `;
 
@@ -33,11 +32,10 @@ exports[`<Tab /> should allow to be wrapped in higher-order-component 1`] = `
   aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
-  className="react-tabs__tab"
-  data-rttab={true}
+  class="react-tabs__tab"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex={null}
 />
 `;
 
@@ -46,11 +44,10 @@ exports[`<Tab /> should have sane defaults 1`] = `
   aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
-  className="react-tabs__tab"
-  data-rttab={true}
+  class="react-tabs__tab"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex={null}
 />
 `;
 
@@ -59,11 +56,10 @@ exports[`<Tab /> should not allow overriding all default properties 1`] = `
   aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
-  className="react-tabs__tab"
-  data-rttab={true}
+  class="react-tabs__tab"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex={null}
 />
 `;
 
@@ -72,12 +68,11 @@ exports[`<Tab /> should pass through custom properties 1`] = `
   aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
-  className="react-tabs__tab"
-  data-rttab={true}
+  class="react-tabs__tab"
+  data-rttab="true"
   data-tooltip="Tooltip contents"
   id="tabnull"
   role="tab"
-  tabIndex={null}
 />
 `;
 
@@ -86,11 +81,10 @@ exports[`<Tab /> should support being disabled 1`] = `
   aria-controls="panelnull"
   aria-disabled="true"
   aria-selected="false"
-  className="react-tabs__tab react-tabs__tab--disabled"
-  data-rttab={true}
+  class="react-tabs__tab react-tabs__tab--disabled"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex={null}
 />
 `;
 
@@ -99,11 +93,10 @@ exports[`<Tab /> should support being disabled with custom class name 1`] = `
   aria-controls="panelnull"
   aria-disabled="true"
   aria-selected="false"
-  className="react-tabs__tab coolDisabled"
-  data-rttab={true}
+  class="react-tabs__tab coolDisabled"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex={null}
 />
 `;
 
@@ -112,11 +105,11 @@ exports[`<Tab /> should support being selected 1`] = `
   aria-controls="panelabcd"
   aria-disabled="false"
   aria-selected="true"
-  className="react-tabs__tab react-tabs__tab--selected"
-  data-rttab={true}
+  class="react-tabs__tab react-tabs__tab--selected"
+  data-rttab="true"
   id="tababcd"
   role="tab"
-  tabIndex="0"
+  tabindex="0"
 >
   Hello
 </li>
@@ -127,10 +120,10 @@ exports[`<Tab /> should support being selected with custom class 1`] = `
   aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="true"
-  className="react-tabs__tab cool"
-  data-rttab={true}
+  class="react-tabs__tab cool"
+  data-rttab="true"
   id="tabnull"
   role="tab"
-  tabIndex="0"
+  tabindex="0"
 />
 `;
diff --git a/src/components/__tests__/__snapshots__/TabList-test.js.snap b/src/components/__tests__/__snapshots__/TabList-test.js.snap
index 1234211d08..2fba3c6927 100644
--- a/src/components/__tests__/__snapshots__/TabList-test.js.snap
+++ b/src/components/__tests__/__snapshots__/TabList-test.js.snap
@@ -2,31 +2,29 @@
 
 exports[`<TabList /> should accept className 1`] = `
 <ul
-  className="foobar"
+  class="foobar"
   role="tablist"
 />
 `;
 
 exports[`<TabList /> should allow for higher order components 1`] = `
 <div
-  className="react-tabs"
-  data-rttabs={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
+  class="react-tabs"
+  data-rttabs="true"
 >
   <ul
-    className="react-tabs__tab-list"
+    class="react-tabs__tab-list"
     role="tablist"
   >
     <li
       aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
-      className="react-tabs__tab react-tabs__tab--selected"
-      data-rttab={true}
+      class="react-tabs__tab react-tabs__tab--selected"
+      data-rttab="true"
       id="tab:r0:0"
       role="tab"
-      tabIndex="0"
+      tabindex="0"
     >
       Foo
     </li>
@@ -34,18 +32,17 @@ exports[`<TabList /> should allow for higher order components 1`] = `
       aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
-      className="react-tabs__tab"
-      data-rttab={true}
+      class="react-tabs__tab"
+      data-rttab="true"
       id="tab:r0:1"
       role="tab"
-      tabIndex={null}
     >
       Bar
     </li>
   </ul>
   <div
     aria-labelledby="tab:r0:0"
-    className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     id="panel:r0:0"
     role="tabpanel"
   >
@@ -53,7 +50,7 @@ exports[`<TabList /> should allow for higher order components 1`] = `
   </div>
   <div
     aria-labelledby="tab:r0:1"
-    className="react-tabs__tab-panel"
+    class="react-tabs__tab-panel"
     id="panel:r0:1"
     role="tabpanel"
   />
@@ -62,24 +59,22 @@ exports[`<TabList /> should allow for higher order components 1`] = `
 
 exports[`<TabList /> should display the custom classnames for selected and disabled tab 1`] = `
 <div
-  className="react-tabs"
-  data-rttabs={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
+  class="react-tabs"
+  data-rttabs="true"
 >
   <ul
-    className="react-tabs__tab-list"
+    class="react-tabs__tab-list"
     role="tablist"
   >
     <li
       aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
-      className="react-tabs__tab active"
-      data-rttab={true}
+      class="react-tabs__tab active"
+      data-rttab="true"
       id="tab:r0:0"
       role="tab"
-      tabIndex="0"
+      tabindex="0"
     >
       Foo
     </li>
@@ -87,18 +82,17 @@ exports[`<TabList /> should display the custom classnames for selected and disab
       aria-controls="panel:r0:1"
       aria-disabled="true"
       aria-selected="false"
-      className="react-tabs__tab disabled"
-      data-rttab={true}
+      class="react-tabs__tab disabled"
+      data-rttab="true"
       id="tab:r0:1"
       role="tab"
-      tabIndex={null}
     >
       Bar
     </li>
   </ul>
   <div
     aria-labelledby="tab:r0:0"
-    className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     id="panel:r0:0"
     role="tabpanel"
   >
@@ -106,7 +100,7 @@ exports[`<TabList /> should display the custom classnames for selected and disab
   </div>
   <div
     aria-labelledby="tab:r0:1"
-    className="react-tabs__tab-panel"
+    class="react-tabs__tab-panel"
     id="panel:r0:1"
     role="tabpanel"
   />
@@ -115,24 +109,22 @@ exports[`<TabList /> should display the custom classnames for selected and disab
 
 exports[`<TabList /> should display the custom classnames for selected and disabled tab specified on tabs 1`] = `
 <div
-  className="react-tabs"
-  data-rttabs={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
+  class="react-tabs"
+  data-rttabs="true"
 >
   <ul
-    className="react-tabs__tab-list"
+    class="react-tabs__tab-list"
     role="tablist"
   >
     <li
       aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
-      className="react-tabs__tab active"
-      data-rttab={true}
+      class="react-tabs__tab active"
+      data-rttab="true"
       id="tab:r0:0"
       role="tab"
-      tabIndex="0"
+      tabindex="0"
     >
       Foo
     </li>
@@ -140,18 +132,17 @@ exports[`<TabList /> should display the custom classnames for selected and disab
       aria-controls="panel:r0:1"
       aria-disabled="true"
       aria-selected="false"
-      className="react-tabs__tab disabled"
-      data-rttab={true}
+      class="react-tabs__tab disabled"
+      data-rttab="true"
       id="tab:r0:1"
       role="tab"
-      tabIndex={null}
     >
       Bar
     </li>
   </ul>
   <div
     aria-labelledby="tab:r0:0"
-    className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     id="panel:r0:0"
     role="tabpanel"
   >
@@ -159,7 +150,7 @@ exports[`<TabList /> should display the custom classnames for selected and disab
   </div>
   <div
     aria-labelledby="tab:r0:1"
-    className="react-tabs__tab-panel"
+    class="react-tabs__tab-panel"
     id="panel:r0:1"
     role="tabpanel"
   />
@@ -168,21 +159,21 @@ exports[`<TabList /> should display the custom classnames for selected and disab
 
 exports[`<TabList /> should have sane defaults 1`] = `
 <ul
-  className="react-tabs__tab-list"
+  class="react-tabs__tab-list"
   role="tablist"
 />
 `;
 
 exports[`<TabList /> should not allow overriding all default properties 1`] = `
 <ul
-  className="react-tabs__tab-list"
+  class="react-tabs__tab-list"
   role="tablist"
 />
 `;
 
 exports[`<TabList /> should pass through custom properties 1`] = `
 <ul
-  className="react-tabs__tab-list"
+  class="react-tabs__tab-list"
   data-tooltip="Tooltip contents"
   role="tablist"
 />
@@ -190,24 +181,22 @@ exports[`<TabList /> should pass through custom properties 1`] = `
 
 exports[`<TabList /> should retain the default classnames for active and disabled tab 1`] = `
 <div
-  className="react-tabs"
-  data-rttabs={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
+  class="react-tabs"
+  data-rttabs="true"
 >
   <ul
-    className="react-tabs__tab-list"
+    class="react-tabs__tab-list"
     role="tablist"
   >
     <li
       aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
-      className="react-tabs__tab react-tabs__tab--selected"
-      data-rttab={true}
+      class="react-tabs__tab react-tabs__tab--selected"
+      data-rttab="true"
       id="tab:r0:0"
       role="tab"
-      tabIndex="0"
+      tabindex="0"
     >
       Foo
     </li>
@@ -215,18 +204,17 @@ exports[`<TabList /> should retain the default classnames for active and disable
       aria-controls="panel:r0:1"
       aria-disabled="true"
       aria-selected="false"
-      className="react-tabs__tab react-tabs__tab--disabled"
-      data-rttab={true}
+      class="react-tabs__tab react-tabs__tab--disabled"
+      data-rttab="true"
       id="tab:r0:1"
       role="tab"
-      tabIndex={null}
     >
       Bar
     </li>
   </ul>
   <div
     aria-labelledby="tab:r0:0"
-    className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     id="panel:r0:0"
     role="tabpanel"
   >
@@ -234,7 +222,7 @@ exports[`<TabList /> should retain the default classnames for active and disable
   </div>
   <div
     aria-labelledby="tab:r0:1"
-    className="react-tabs__tab-panel"
+    class="react-tabs__tab-panel"
     id="panel:r0:1"
     role="tabpanel"
   />
diff --git a/src/components/__tests__/__snapshots__/TabPanel-test.js.snap b/src/components/__tests__/__snapshots__/TabPanel-test.js.snap
index 4c4f1d1260..de670ac8df 100644
--- a/src/components/__tests__/__snapshots__/TabPanel-test.js.snap
+++ b/src/components/__tests__/__snapshots__/TabPanel-test.js.snap
@@ -3,7 +3,7 @@
 exports[`<TabPanel /> should accept className 1`] = `
 <div
   aria-labelledby="tabundefined"
-  className="foobar"
+  class="foobar"
   id="panelundefined"
   role="tabpanel"
 />
@@ -12,7 +12,7 @@ exports[`<TabPanel /> should accept className 1`] = `
 exports[`<TabPanel /> should allow for higher-order components 1`] = `
 <div
   aria-labelledby="tabundefined"
-  className="react-tabs__tab-panel"
+  class="react-tabs__tab-panel"
   id="panelundefined"
   role="tabpanel"
 />
@@ -21,7 +21,7 @@ exports[`<TabPanel /> should allow for higher-order components 1`] = `
 exports[`<TabPanel /> should have sane defaults 1`] = `
 <div
   aria-labelledby="tabundefined"
-  className="react-tabs__tab-panel"
+  class="react-tabs__tab-panel"
   id="panelundefined"
   role="tabpanel"
 />
@@ -30,7 +30,7 @@ exports[`<TabPanel /> should have sane defaults 1`] = `
 exports[`<TabPanel /> should not allow overriding all default properties 1`] = `
 <div
   aria-labelledby="tabundefined"
-  className="react-tabs__tab-panel"
+  class="react-tabs__tab-panel"
   id="panelundefined"
   role="tabpanel"
 />
@@ -39,7 +39,7 @@ exports[`<TabPanel /> should not allow overriding all default properties 1`] = `
 exports[`<TabPanel /> should pass through custom properties 1`] = `
 <div
   aria-labelledby="tabundefined"
-  className="react-tabs__tab-panel"
+  class="react-tabs__tab-panel"
   data-tooltip="Tooltip contents"
   id="panelundefined"
   role="tabpanel"
@@ -49,7 +49,7 @@ exports[`<TabPanel /> should pass through custom properties 1`] = `
 exports[`<TabPanel /> should render when forced 1`] = `
 <div
   aria-labelledby="tabundefined"
-  className="react-tabs__tab-panel"
+  class="react-tabs__tab-panel"
   id="panelundefined"
   role="tabpanel"
 >
@@ -60,7 +60,7 @@ exports[`<TabPanel /> should render when forced 1`] = `
 exports[`<TabPanel /> should render when selected 1`] = `
 <div
   aria-labelledby="tabundefined"
-  className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+  class="react-tabs__tab-panel react-tabs__tab-panel--selected"
   id="panelundefined"
   role="tabpanel"
 >
@@ -71,7 +71,7 @@ exports[`<TabPanel /> should render when selected 1`] = `
 exports[`<TabPanel /> should support being selected 1`] = `
 <div
   aria-labelledby="tababcd"
-  className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+  class="react-tabs__tab-panel react-tabs__tab-panel--selected"
   id="panelabcd"
   role="tabpanel"
 >
@@ -82,7 +82,7 @@ exports[`<TabPanel /> should support being selected 1`] = `
 exports[`<TabPanel /> should support being selected with custom class name 1`] = `
 <div
   aria-labelledby="tababcd"
-  className="react-tabs__tab-panel selected"
+  class="react-tabs__tab-panel selected"
   id="panelabcd"
   role="tabpanel"
 >