Migrate enzyme to react-testing-library

.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  // parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
     tsconfigRootDir: __dirname,
@@ -8,6 +7,11 @@ module.exports = {
     browser: true,
     jest: true,
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
   extends: [
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',

.gitignore

@@ -2,8 +2,6 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 lerna-debug.log*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
@@ -65,6 +63,18 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
+# Yarn files
+yarn-error.log
+yarn-debug.log*
+yarn-error.log*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # Yarn Integrity file
 .yarn-integrity
 
@@ -108,7 +118,6 @@ dist
 
 # Custom
 lib/
-yarn-error.log
 storybook-static/
 
 # IDEA files

.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';
 

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+npmRegistryServer: https://registry.yarnpkg.com

jest.config.js

@@ -3,15 +3,23 @@ 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',
+    '^.+\\.(t|j)sx?$': [
+      'ts-jest',
+      {
+        babelConfig: {
+          plugins: ['@babel/plugin-transform-modules-commonjs'],
+        },
+      },
+    ],
   },
+  transformIgnorePatterns: ['node_modules/(?!nhsuk-frontend/packages)'],
 };
 
 module.exports = jestConfig;

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"
@@ -28,6 +30,7 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.19.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
     "@babel/preset-react": "^7.18.6",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
@@ -41,15 +44,16 @@
     "@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",
     "@types/rollup-plugin-peer-deps-external": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
-    "babel-loader": "^8.2.2",
     "chromatic": "^6.17.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -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,14 +81,12 @@
     "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",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

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>
 `;