chore: migrate to react-testing library (#570)

Author: danez

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"

pnpm-lock.yaml

@@ -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 />', () => {

src/components/__tests__/Tab-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 />', () => {

src/components/__tests__/TabList-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 />', () => {

src/components/__tests__/TabPanel-test.js

@@ -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"
 />
 `;