Polyfill missing JSDOM functionality

Author: colinrotherham

.eslintrc.js

@@ -150,7 +150,11 @@ module.exports = {
     },
     {
       // Configure ESLint in test files
-      files: ['**/*.test.{cjs,js,mjs}', 'jest.config.*', 'jest.setup.*'],
+      files: [
+        '**/*.test.{cjs,js,mjs}',
+        'jest?(.*).config.*',
+        'jest?(.*).setup.*'
+      ],
       extends: ['plugin:jest/recommended', 'plugin:jest/style'],
       env: {
         browser: true,

jest.config.js

@@ -47,14 +47,18 @@ module.exports = {
     {
       ...config,
       displayName: 'JavaScript behaviour tests',
-      setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+      setupFilesAfterEnv: [
+        '<rootDir>/shared/helpers/jest/environment/jest.jsdom.setup.js'
+      ],
       testEnvironment: 'jsdom',
       testMatch: ['<rootDir>/**/*.jsdom.test.{js,mjs}']
     },
     {
       ...config,
       displayName: 'JavaScript component tests',
-      setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+      setupFilesAfterEnv: [
+        '<rootDir>/shared/helpers/jest/environment/jest.puppeteer.setup.js'
+      ],
       testEnvironment: 'jest-environment-puppeteer',
       testMatch: ['<rootDir>/**/*.puppeteer.test.{js,mjs}'],
 

shared/helpers/jest/environment/jest.jsdom.setup.js

@@ -0,0 +1,34 @@
+require('@testing-library/jest-dom')
+
+/**
+ * Polyfill HTMLLabelElement methods for error summary
+ *
+ * @see {@link https://github.com/jsdom/jsdom/issues/1695}
+ */
+Object.defineProperties(HTMLLabelElement.prototype, {
+  scrollIntoView: { value: jest.fn() }
+})
+
+/**
+ * Polyfill HTMLLabelElement methods for error summary
+ *
+ * @see {@link https://github.com/jsdom/jsdom/issues/1695}
+ */
+Object.defineProperties(HTMLLegendElement.prototype, {
+  scrollIntoView: { value: jest.fn() }
+})
+
+/**
+ * Polyfill `window.matchMedia()` for GOV.UK Frontend
+ */
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: true,
+    media: query,
+    onchange: null,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+})