chore(deps): migrate from enzyme to @testing-library/react

packages/components/forma-36-react-datepicker/test/Datepicker.test.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import '@testing-library/jest-dom/extend-expect';
 import Datepicker from '../src/Datepicker';
 
 describe('Datepicker', () => {
-  afterEach(cleanup);
-
   const build = () => {
     const props = {
       labelText: 'label text',

packages/components/forma-36-react-timepicker/test/Timepicker.test.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import * as dateFns from 'date-fns';
 import '@testing-library/jest-dom/extend-expect';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Timepicker from '../src/Timepicker';
 
 describe('TimePicker', () => {
   let dateNowSpy: any;
 
-  afterEach(cleanup);
   beforeEach(() => {
     dateNowSpy = jest.spyOn(Date, 'now');
   });

packages/forma-36-react-components/.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     'plugin:jest/recommended',
     'plugin:jest/style',
   ],
-  plugins: ['react-hooks'],
+  plugins: ['react-hooks', 'jest-dom', 'testing-library'],
   parserOptions: {
     ecmaVersion: 7,
     project: './tsconfig.json',

packages/forma-36-react-components/README.md

@@ -144,7 +144,7 @@ Here is the example output of running the `yarn add-documentation` command:
 
 ## Testing
 
-We are using [Jest](https://facebook.github.io/jest/) and [Enzyme](http://airbnb.io/enzyme/) to test our components.
+We are using [Jest](https://facebook.github.io/jest/) and [Testing Library](https://testing-library.com/docs/react-testing-library/intro/) to test our components.
 
 Tests are kept next to their components and use the `.test.js` file extension.
 

packages/forma-36-react-components/package.json

@@ -34,6 +34,7 @@
     "@storybook/theming": "^6.0.28",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.2.0",
     "@types/classnames": "2.2.7",
     "@types/enzyme": "^3.10.7",
     "@types/jest": "^24.0.25",
@@ -64,10 +65,12 @@
     "eslint-config-prettier": "4.2.0",
     "eslint-plugin-import": "2.17.2",
     "eslint-plugin-jest": "22.5.1",
+    "eslint-plugin-jest-dom": "^3.2.4",
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "7.13.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-testing-library": "^3.10.0",
     "file-loader": "^3.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
@@ -83,7 +86,6 @@
     "postcss-preset-env": "^6.7.0",
     "postcss-url": "^8.0.0",
     "react-docgen-typescript-loader": "3.1.0",
-    "react-test-renderer": "^16.8.3",
     "rollup": "^1.8.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.3.0",
@@ -144,7 +146,7 @@
   "jest": {
     "globalSetup": "<rootDir>/test/config/globalSetup.js",
     "setupFilesAfterEnv": [
-      "<rootDir>/test/config/tests.js"
+      "<rootDir>/test/config/tests.ts"
     ],
     "testPathIgnorePatterns": [
       "<rootDir>/node_modules/",

packages/forma-36-react-components/src/components/Accordion/Accordion.test.tsx

@@ -1,58 +1,63 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import axe from '../../utils/axeHelper';
 import Accordion from './Accordion';
 import AccordionItem from './AccordionItem';
 
 it('renders the component', () => {
-  const output = shallow(
+  const { container } = render(
     <Accordion>
       <AccordionItem title="Accordion Title">Accordion content</AccordionItem>
     </Accordion>,
   );
 
-  expect(output).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });
 
 it('renders the component with an additional class name', () => {
-  const output = shallow(
+  const { container } = render(
     <Accordion className="my-extra-class">
       <AccordionItem title="Accordion Title">Accordion content</AccordionItem>
     </Accordion>,
   );
 
-  expect(output).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });
 
 it('renders the component with chevron on the left', () => {
-  const output = shallow(
+  const { container } = render(
     <Accordion align="start">
-      <AccordionItem title="Accordion Title">Accordion content</AccordionItem>
+      <AccordionItem data-testid="panel" title="Accordion Title">
+        Accordion content
+      </AccordionItem>
     </Accordion>,
   );
 
-  expect(output).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });
 
 it('opens the accordion panel when the header is clicked', () => {
-  const output = mount(
+  render(
     <Accordion>
       <AccordionItem title="Accordion Title">Accordion content</AccordionItem>
     </Accordion>,
   );
 
-  const accordionId = 'div[id^="accordion-panel"]';
   const expandedClass = 'AccordionPanel--expanded';
+  const panel = screen.getByLabelText('Accordion Title');
 
-  expect(output.find(accordionId).hasClass(expandedClass)).toBe(false);
-  output.find('button').simulate('click');
-  expect(output.find(accordionId).hasClass(expandedClass)).toBe(true);
+  expect(panel.classList.contains(expandedClass)).toBe(false);
+
+  userEvent.click(screen.getByText('Accordion Title'));
+  expect(panel.classList.contains(expandedClass)).toBe(true);
 });
 
 it('calls onExpand && onCollapse when an accordion item is expanded and collapsed', () => {
   const onExpand = jest.fn();
   const onCollapse = jest.fn();
-  const output = mount(
+  render(
     <Accordion>
       <AccordionItem
         title="Accordion Title"
@@ -64,21 +69,22 @@ it('calls onExpand && onCollapse when an accordion item is expanded and collapse
     </Accordion>,
   );
 
-  output.find('button').simulate('click');
+  userEvent.click(screen.getByText('Accordion Title'));
   expect(onExpand).toHaveBeenCalledTimes(1);
   expect(onCollapse).toHaveBeenCalledTimes(0);
-  output.find('button').simulate('click');
+
+  userEvent.click(screen.getByText('Accordion Title'));
   expect(onExpand).toHaveBeenCalledTimes(1);
   expect(onCollapse).toHaveBeenCalledTimes(1);
 });
 
 it('has no a11y issues', async () => {
-  const output = mount(
+  const { container } = render(
     <Accordion>
       <AccordionItem title="Accordion Title">Accordion content</AccordionItem>
     </Accordion>,
-  ).html();
-  const results = await axe(output);
+  );
+  const results = await axe(container);
 
   expect(results).toHaveNoViolations();
 });

packages/forma-36-react-components/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -2,45 +2,150 @@
 
 exports[`renders the component 1`] = `
 <ul
-  className="Accordion Accordion--end"
+  class="Accordion Accordion--end"
   data-test-id="cf-ui-accordion"
 >
-  <AccordionItem
-    testId="cf-ui-accordion-item"
-    title="Accordion Title"
-    titleElement="h2"
+  <li
+    class="AccordionItem"
+    data-test-id="cf-ui-accordion-item-1"
   >
-    Accordion content
-  </AccordionItem>
+    <h2
+      class="Subheading"
+      data-test-id="cf-ui-subheading"
+    >
+      <button
+        aria-controls="accordion-panel--1"
+        aria-expanded="false"
+        class="AccordionHeader"
+        id="accordion--1"
+        type="button"
+      >
+        <svg
+          class="Icon Icon--small Icon--secondary Icon--trimmed AccordionHeader__icon"
+          data-test-id="cf-ui-icon"
+          viewBox="0 0 9 18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.1 5.9l3.4 3.4 3.4-3.4 1.1 1-4.5 4.5L0 6.9l1.1-1z"
+          />
+          <path
+            d="M0 0h9v18H0V0z"
+            fill="none"
+          />
+        </svg>
+        Accordion Title
+      </button>
+    </h2>
+    <div
+      aria-hidden="true"
+      aria-labelledby="accordion--1"
+      class="AccordionPanel"
+      id="accordion-panel--1"
+      role="region"
+    >
+      Accordion content
+    </div>
+  </li>
 </ul>
 `;
 
 exports[`renders the component with an additional class name 1`] = `
 <ul
-  className="Accordion my-extra-class Accordion--end"
+  class="Accordion my-extra-class Accordion--end"
   data-test-id="cf-ui-accordion"
 >
-  <AccordionItem
-    testId="cf-ui-accordion-item"
-    title="Accordion Title"
-    titleElement="h2"
+  <li
+    class="AccordionItem"
+    data-test-id="cf-ui-accordion-item-2"
   >
-    Accordion content
-  </AccordionItem>
+    <h2
+      class="Subheading"
+      data-test-id="cf-ui-subheading"
+    >
+      <button
+        aria-controls="accordion-panel--2"
+        aria-expanded="false"
+        class="AccordionHeader"
+        id="accordion--2"
+        type="button"
+      >
+        <svg
+          class="Icon Icon--small Icon--secondary Icon--trimmed AccordionHeader__icon"
+          data-test-id="cf-ui-icon"
+          viewBox="0 0 9 18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.1 5.9l3.4 3.4 3.4-3.4 1.1 1-4.5 4.5L0 6.9l1.1-1z"
+          />
+          <path
+            d="M0 0h9v18H0V0z"
+            fill="none"
+          />
+        </svg>
+        Accordion Title
+      </button>
+    </h2>
+    <div
+      aria-hidden="true"
+      aria-labelledby="accordion--2"
+      class="AccordionPanel"
+      id="accordion-panel--2"
+      role="region"
+    >
+      Accordion content
+    </div>
+  </li>
 </ul>
 `;
 
 exports[`renders the component with chevron on the left 1`] = `
 <ul
-  className="Accordion Accordion--start"
+  class="Accordion Accordion--start"
   data-test-id="cf-ui-accordion"
 >
-  <AccordionItem
-    testId="cf-ui-accordion-item"
-    title="Accordion Title"
-    titleElement="h2"
+  <li
+    class="AccordionItem"
+    data-test-id="cf-ui-accordion-item-3"
   >
-    Accordion content
-  </AccordionItem>
+    <h2
+      class="Subheading"
+      data-test-id="cf-ui-subheading"
+    >
+      <button
+        aria-controls="accordion-panel--3"
+        aria-expanded="false"
+        class="AccordionHeader"
+        id="accordion--3"
+        type="button"
+      >
+        <svg
+          class="Icon Icon--small Icon--secondary Icon--trimmed AccordionHeader__icon"
+          data-test-id="cf-ui-icon"
+          viewBox="0 0 9 18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.1 5.9l3.4 3.4 3.4-3.4 1.1 1-4.5 4.5L0 6.9l1.1-1z"
+          />
+          <path
+            d="M0 0h9v18H0V0z"
+            fill="none"
+          />
+        </svg>
+        Accordion Title
+      </button>
+    </h2>
+    <div
+      aria-hidden="true"
+      aria-labelledby="accordion--3"
+      class="AccordionPanel"
+      id="accordion-panel--3"
+      role="region"
+    >
+      Accordion content
+    </div>
+  </li>
 </ul>
 `;