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" >