Bump JSDOM to 21.x

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "installCommand": "install:csb",
   "sandboxes": ["github/kentcdodds/react-testing-library-examples"],
-  "node": "12"
+  "node": "14"
 }

.github/workflows/validate.yml

@@ -26,7 +26,7 @@ jobs:
       # Otherwise we would not know if the problem is tied to the Node.js version
       fail-fast: false
       matrix:
-        node: [12, 14, 16]
+        node: [14, 16, 18]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs

package.json

@@ -21,7 +21,7 @@
   "author": "Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)",
   "license": "MIT",
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "browserslist": [
     "and_chr 103",
@@ -40,13 +40,14 @@
     "safari 15.5",
     "samsung 17.0",
     "samsung 16.0",
-    "node 12.0"
+    "node 14.0"
   ],
   "scripts": {
     "build": "kcd-scripts build  --no-ts-defs --ignore \"**/__tests__/**,**/__node_tests__/**,**/__mocks__/**\" && kcd-scripts build --no-ts-defs --bundle --no-clean",
     "format": "kcd-scripts format",
     "install:csb": "npm install",
     "lint": "kcd-scripts lint",
+    "postinstall": "patch-package",
     "setup": "npm install && npm run validate -s",
     "test": "kcd-scripts test",
     "test:debug": "node --inspect-brk ./node_modules/.bin/jest --watch --runInBand",
@@ -68,21 +69,28 @@
     "lz-string": "^1.4.4",
     "pretty-format": "^27.0.2"
   },
+  "overrides": {
+    "jsdom": "^21.1.0"
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.6",
     "@types/lz-string": "^1.3.34",
     "jest-in-case": "^1.0.2",
     "jest-snapshot-serializer-ansi": "^1.0.0",
     "jest-watch-select-projects": "^2.0.0",
-    "jsdom": "^16.4.0",
-    "kcd-scripts": "^11.0.0",
+    "jsdom": "^21.1.0",
+    "kcd-scripts": "^13.0.0",
+    "patch-package": "^6.5.1",
     "typescript": "^4.1.2"
   },
   "eslintConfig": {
     "extends": [
       "./node_modules/kcd-scripts/eslint.js",
       "plugin:import/typescript"
     ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
     "rules": {
       "@typescript-eslint/prefer-optional-chain": "off",
       "@typescript-eslint/no-explicit-any": "off",

patches/jest-environment-jsdom+29.4.1.patch

@@ -0,0 +1,20 @@
+diff --git a/node_modules/jest-environment-jsdom/build/index.js b/node_modules/jest-environment-jsdom/build/index.js
+index f2f6731..7fcd5ed 100644
+--- a/node_modules/jest-environment-jsdom/build/index.js
++++ b/node_modules/jest-environment-jsdom/build/index.js
+@@ -161,15 +161,6 @@ class JSDOMEnvironment {
+         this.global.removeEventListener('error', this.errorEventListener);
+       }
+       this.global.close();
+-
+-      // Dispose "document" to prevent "load" event from triggering.
+-
+-      // Note that this.global.close() will trigger the CustomElement::disconnectedCallback
+-      // Do not reset the document before CustomElement disconnectedCallback function has finished running,
+-      // document should be accessible within disconnectedCallback.
+-      Object.defineProperty(this.global, 'document', {
+-        value: null
+-      });
+     }
+     this.errorEventListener = null;
+     // @ts-expect-error: this.global not allowed to be `null`

src/__tests__/config.js

@@ -11,14 +11,15 @@ describe('configuration API', () => {
       return {}
     })
   })
-  afterEach(() => {
-    configure(originalConfig)
-  })
 
   beforeEach(() => {
     configure({other: 123})
   })
 
+  afterEach(() => {
+    configure(originalConfig)
+  })
+
   describe('getConfig', () => {
     test('returns existing configuration', () => {
       const conf = getConfig()

src/__tests__/fake-timers.js

@@ -70,6 +70,7 @@ test('recursive timers do not cause issues', async () => {
   let recurse = true
   function startTimer() {
     setTimeout(() => {
+      // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
       if (recurse) startTimer()
     }, 1)
   }

src/__tests__/role.js

@@ -274,6 +274,7 @@ test('accessible name filter implements TextMatch', () => {
   expect(
     getByRole('heading', {
       name: (name, element) => {
+        // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
         return element.nodeName === 'H2' && name === 'Your Signature'
       },
     }),
@@ -564,11 +565,11 @@ describe('configuration', () => {
       queryByRole('button', {name: 'Hello, Dave!'})
 
       expect(console.error).toHaveBeenCalledTimes(2)
-      expect(console.error.mock.calls[0][0]).toMatch(
-        'Error: Not implemented: window.computedStyle(elt, pseudoElt)',
+      expect(console.error.mock.calls[0][0].message).toMatch(
+        'Not implemented: window.computedStyle(elt, pseudoElt)',
       )
-      expect(console.error.mock.calls[1][0]).toMatch(
-        'Error: Not implemented: window.computedStyle(elt, pseudoElt)',
+      expect(console.error.mock.calls[1][0].message).toMatch(
+        'Not implemented: window.computedStyle(elt, pseudoElt)',
       )
     } finally {
       jest.restoreAllMocks()

src/__tests__/suggestions.js

@@ -612,8 +612,8 @@ test('should suggest hidden option if element is not in the accessibility tree',
   suggestion.toString()
 
   expect(console.warn.mock.calls).toMatchInlineSnapshot(`
-    Array [
-      Array [
+    [
+      [
         Element is inaccessible. This means that the element and all its children are invisible to screen readers.
         If you are using the aria-hidden prop, make sure this is the right choice for your case.
         ,
@@ -649,9 +649,9 @@ test('should find label text using the aria-labelledby', () => {
       warning: '',
     },
     `
-    Object {
-      queryArgs: Array [
-        Object {},
+    {
+      queryArgs: [
+        {},
       ],
       queryMethod: getByLabelText,
       queryName: LabelText,

src/__tests__/wait-for-element-to-be-removed.js

@@ -98,6 +98,7 @@ test('rethrows non-testing-lib errors', () => {
   const error = new Error('my own error')
   return expect(
     waitForElementToBeRemoved(() => {
+      // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
       if (throwIt) {
         throw error
       }

src/__tests__/wait-for.js

@@ -275,7 +275,7 @@ test('does not work after it resolves', async () => {
       context = 'act'
       try {
         const result = callback()
-        // eslint-disable-next-line jest/no-if
+        // eslint-disable-next-line jest/no-if, jest/no-conditional-in-test -- false-positive
         if (typeof result?.then === 'function') {
           const thenable = result
           return {
@@ -319,6 +319,7 @@ test('does not work after it resolves', async () => {
 
   await waitFor(
     () => {
+      // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
       if (data === null) {
         throw new Error('not found')
       }

src/helpers.ts

@@ -10,6 +10,7 @@ function jestFakeTimersAreEnabled() {
       // legacy timers
       (setTimeout as any)._isMockFunction === true ||
       // modern timers
+      // eslint-disable-next-line prefer-object-has-own -- not supported by our support matrix
       Object.prototype.hasOwnProperty.call(setTimeout, 'clock')
     )
   }

src/queries/label-text.ts

@@ -71,20 +71,23 @@ const queryAllByLabelText: AllByText = (
           if (
             matcher(label.content, label.formControl, text, matchNormalizer) &&
             label.formControl
-          )
+          ) {
             labelledElements.push(label.formControl)
+          }
         })
       const labelsValue = labelList
         .filter(label => Boolean(label.content))
         .map(label => label.content)
       if (
         matcher(labelsValue.join(' '), labelledElement, text, matchNormalizer)
-      )
+      ) {
         labelledElements.push(labelledElement)
+      }
       if (labelsValue.length > 1) {
         labelsValue.forEach((labelValue, index) => {
-          if (matcher(labelValue, labelledElement, text, matchNormalizer))
+          if (matcher(labelValue, labelledElement, text, matchNormalizer)) {
             labelledElements.push(labelledElement)
+          }
 
           const labelsFiltered = [...labelsValue]
           labelsFiltered.splice(index, 1)
@@ -97,8 +100,9 @@ const queryAllByLabelText: AllByText = (
                 text,
                 matchNormalizer,
               )
-            )
+            ) {
               labelledElements.push(labelledElement)
+            }
           }
         })
       }

src/query-helpers.ts

@@ -1,11 +1,11 @@
-import type {
-  GetErrorFunction,
-  Matcher,
-  MatcherOptions,
-  QueryMethod,
-  Variant,
-  waitForOptions as WaitForOptions,
-  WithSuggest,
+import {
+  type GetErrorFunction,
+  type Matcher,
+  type MatcherOptions,
+  type QueryMethod,
+  type Variant,
+  type waitForOptions as WaitForOptions,
+  type WithSuggest,
 } from '../types'
 import {getSuggestedQuery} from './suggestions'
 import {fuzzyMatches, matches, makeNormalizer} from './matches'

src/screen.ts

@@ -1,7 +1,7 @@
 // WARNING: `lz-string` only has a default export but statically we assume named exports are allowd
 // TODO: Statically verify we don't rely on NodeJS implicit named imports.
 import lzString from 'lz-string'
-import type {OptionsReceived} from 'pretty-format'
+import {type OptionsReceived} from 'pretty-format'
 import {getQueriesForElement} from './get-queries-for-element'
 import {getDocument} from './helpers'
 import {logDOM} from './pretty-dom'

tests/jest.config.dom.js

@@ -1,7 +1,12 @@
 const path = require('path')
-const baseConfig = require('kcd-scripts/jest')
+const {
+  // global config options that would trigger warnings in project configs
+  collectCoverageFrom,
+  watchPlugins,
+  ...baseConfig
+} = require('kcd-scripts/jest')
 
-module.exports = {
+const projectConfig = {
   ...baseConfig,
   rootDir: path.join(__dirname, '..'),
   displayName: 'dom',
@@ -12,3 +17,5 @@ module.exports = {
   ],
   testEnvironment: 'jest-environment-jsdom',
 }
+
+module.exports = projectConfig

tests/jest.config.node.js

@@ -1,7 +1,12 @@
 const path = require('path')
-const baseConfig = require('kcd-scripts/jest')
+const {
+  // global config options that would trigger warnings in project configs
+  collectCoverageFrom,
+  watchPlugins,
+  ...baseConfig
+} = require('kcd-scripts/jest')
 
-module.exports = {
+const projectConfig = {
   ...baseConfig,
   rootDir: path.join(__dirname, '..'),
   displayName: 'node',
@@ -13,3 +18,5 @@ module.exports = {
   ],
   testMatch: ['**/__node_tests__/**.js'],
 }
+
+module.exports = projectConfig