Migrate enzyme to react-testing-library

.nvmrc

@@ -0,0 +1 @@
+18

.storybook/storybook.scss

@@ -1,8 +1,3 @@
-// Also import styles for deprecated Panel and Promo
-@import '../node_modules/nhsuk-frontend-legacy/packages/core/all.scss';
-@import '../node_modules/nhsuk-frontend-legacy/packages/components/panel/panel';
-@import '../node_modules/nhsuk-frontend-legacy/packages/components/promo/promo';
-
 // Allow current nhsuk styles to override legacy
 @import '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
 

jest.config.js

@@ -4,10 +4,11 @@ const { compilerOptions } = require('./tsconfig.json');
 const jestConfig = {
   testEnvironment: 'jsdom',
   moduleDirectories: ['node_modules'],
-  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
-  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
+  rootDir: './src',
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  collectCoverageFrom: ['<rootDir>/**/*.{ts,tsx}'],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
-    prefix: '<rootDir>/src/',
+    prefix: '<rootDir>/',
   }),
   transform: {
     '^.+\\.(t|j)sx?$': 'ts-jest',

package.json

@@ -14,12 +14,14 @@
   "scripts": {
     "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
     "storybook": "storybook dev -p 6006",
+    "build": "yarn cleanup && yarn build:dist && yarn build:lib",
     "build:dist": "rollup -c",
     "build:lib": "NODE_ENV=production babel src --out-dir lib --extensions \".ts,.tsx\" --ignore \"**/__tests__,**/__mocks__,**/setupTests.ts\"",
-    "build": "yarn cleanup && yarn build:dist && yarn build:lib",
-    "test": "jest src/components/navigation/pagination/__tests__/Pagination.test.tsx",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "test:ci": "jest --coverage",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix",
+    "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix",
     "lint:ci": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
     "build-storybook": "storybook build",
     "prepublishOnly": "yarn lint:ci && yarn test:ci && yarn storybook --smoke-test"
@@ -41,8 +43,10 @@
     "@storybook/react": "^7.0.2",
     "@storybook/react-vite": "^7.0.2",
     "@storybook/theming": "^7.0.2",
-    "@types/jest": "^26.0.23",
-    "@types/jest-axe": "^3.5.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^15.0.2",
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
@@ -61,8 +65,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "nhsuk-frontend": "8.1.0",
-    "nhsuk-frontend-legacy": "npm:[email protected]",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -77,10 +81,7 @@
     "vite": "^4.2.1"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "classnames": "^2.2.6",
-    "jest-environment-jsdom": "^29.7.0"
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "nhsuk-frontend": ">=8.0.0",

src/components/content-presentation/details/__tests__/Details.test.tsx

@@ -1,52 +1,54 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import Details from '..';
+import { render } from '@testing-library/react';
+import Details from '../';
 
 describe('Details', () => {
   it('matches snapshot', () => {
-    const standardDetails = shallow(<Details />);
-    const expanderDetails = shallow(<Details expander />);
-    expect(standardDetails).toMatchSnapshot('StandardDetails');
-    expect(expanderDetails).toMatchSnapshot('ExpanderDetails');
-    standardDetails.unmount();
-    expanderDetails.unmount();
+    const { container } = render(<Details />);
+
+    expect(container).toMatchSnapshot('StandardDetails');
+  });
+
+  it('matches snapshot - with expander present', () => {
+    const { container } = render(<Details expander />);
+
+    expect(container).toMatchSnapshot('ExpanderDetails');
   });
 
   it('adds expander classes', () => {
-    const expander = shallow(<Details expander />);
-    expect(expander.hasClass('nhsuk-expander')).toBeTruthy();
-    expander.unmount();
+    const { container } = render(<Details expander />);
+
+    expect(container.querySelector('.nhsuk-expander')).toBeTruthy();
   });
 
   describe('Details.Summary', () => {
     it('matches snapshot', () => {
-      const element = shallow(<Details.Summary>Content</Details.Summary>);
-      expect(element).toMatchSnapshot('Details.Summary');
-      expect(element.type()).toEqual('summary');
-      expect(
-        element.containsMatchingElement(
-          <span className="nhsuk-details__summary-text">Content</span>,
-        ),
-      ).toBeTruthy();
-      element.unmount();
+      const { container } = render(<Details.Summary>Content</Details.Summary>);
+
+      expect(container).toMatchSnapshot('Details.Summary');
+    });
+
+    it('renders children', () => {
+      const { container } = render(<Details.Summary>Content</Details.Summary>);
+      const summaryText = container.querySelector('span.nhsuk-details__summary-text');
+
+      expect(summaryText?.textContent).toBe('Content');
     });
   });
 
   describe('Details.Text', () => {
     it('matches snapshot', () => {
-      const element = shallow(<Details.Text>Text</Details.Text>);
-      expect(element).toMatchSnapshot('Details.Text');
-      expect(element.type()).toEqual('div');
-      element.unmount();
+      const { container } = render(<Details.Text>Text</Details.Text>);
+
+      expect(container).toMatchSnapshot('Details.Text');
     });
   });
 
   describe('Details.ExpanderGroup', () => {
     it('matches snapshot', () => {
-      const element = shallow(<Details.ExpanderGroup />);
-      expect(element).toMatchSnapshot('Details.ExpanderGroup');
-      expect(element.type()).toEqual('div');
-      element.unmount();
+      const { container } = render(<Details.ExpanderGroup />);
+
+      expect(container).toMatchSnapshot('Details.ExpanderGroup');
     });
   });
 });

src/components/content-presentation/details/__tests__/__snapshots__/Details.test.tsx.snap

@@ -1,39 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Details Details.ExpanderGroup matches snapshot: Details.ExpanderGroup 1`] = `
-<div
-  className="nhsuk-expander-group"
-/>
+<div>
+  <div
+    class="nhsuk-expander-group"
+  />
+</div>
 `;
 
 exports[`Details Details.Summary matches snapshot: Details.Summary 1`] = `
-<summary
-  className="nhsuk-details__summary"
->
-  <span
-    className="nhsuk-details__summary-text"
+<div>
+  <summary
+    class="nhsuk-details__summary"
   >
-    Content
-  </span>
-</summary>
+    <span
+      class="nhsuk-details__summary-text"
+    >
+      Content
+    </span>
+  </summary>
+</div>
 `;
 
 exports[`Details Details.Text matches snapshot: Details.Text 1`] = `
-<div
-  className="nhsuk-details__text"
->
-  Text
+<div>
+  <div
+    class="nhsuk-details__text"
+  >
+    Text
+  </div>
 </div>
 `;
 
-exports[`Details matches snapshot: ExpanderDetails 1`] = `
-<details
-  className="nhsuk-details nhsuk-expander"
-/>
+exports[`Details matches snapshot - with expander present: ExpanderDetails 1`] = `
+<div>
+  <details
+    class="nhsuk-details nhsuk-expander"
+  />
+</div>
 `;
 
 exports[`Details matches snapshot: StandardDetails 1`] = `
-<details
-  className="nhsuk-details"
-/>
+<div>
+  <details
+    class="nhsuk-details"
+  />
+</div>
 `;