feat: upgrade to jsdom@20 (jestjs#13037)

Author: SimenB

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 
 - `[jest-config]` [**BREAKING**] Make `snapshotFormat` default to `escapeString: false` and `printBasicPrototype: false` ([#13036](https://github.com/facebook/jest/pull/13036))
+- `[jest-environment-jsdom]` [**BREAKING**] Upgrade to `jsdom@20` ([#13037](https://github.com/facebook/jest/pull/13037))
 
 ### Fixes
 

docs/UpgradingToJest29.md

@@ -27,3 +27,7 @@ If you want to keep the old behavior, you can set the `snapshotFormat` property
 +   printBasicPrototype: true
 + }
 ```
+
+## JSDOM upgrade
+
+`jest-environment-jsdom` has upgraded `jsdom` from v19 to v20. Due to issues with `@types/jsdom`, if you extend this environment, you might run into type errors. See https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/60999#discussioncomment-3158685.

packages/expect/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "lib": ["es2020", "dom"],
     "rootDir": "src",
     "outDir": "build"
   },

packages/jest-environment-jsdom/package.json

@@ -20,11 +20,10 @@
     "@jest/environment": "^28.1.3",
     "@jest/fake-timers": "^28.1.3",
     "@jest/types": "^28.1.3",
-    "@types/jsdom": "^16.2.4",
     "@types/node": "*",
     "jest-mock": "^28.1.3",
     "jest-util": "^28.1.3",
-    "jsdom": "^19.0.0"
+    "jsdom": "^20.0.0"
   },
   "devDependencies": {
     "@jest/test-utils": "^28.1.3"

packages/jest-environment-jsdom/src/index.ts

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/// <reference lib="dom" />
+
 import type {Context} from 'vm';
+// @ts-expect-error: TODO: we're missing v20 types
 import {JSDOM, ResourceLoader, VirtualConsole} from 'jsdom';
 import type {
   EnvironmentContext,
@@ -27,7 +30,8 @@ type Win = Window &
   };
 
 export default class JSDOMEnvironment implements JestEnvironment<number> {
-  dom: JSDOM | null;
+  // TODO: make non-privat when we have `@types/jsdom` again
+  private dom: JSDOM | null;
   fakeTimers: LegacyFakeTimers<number> | null;
   fakeTimersModern: ModernFakeTimers | null;
   global: Win;
@@ -40,6 +44,7 @@ export default class JSDOMEnvironment implements JestEnvironment<number> {
 
     const virtualConsole = new VirtualConsole();
     virtualConsole.sendTo(context.console, {omitJSDOMErrors: true});
+    // @ts-expect-error: TODO: we're missing v20 types
     virtualConsole.on('jsdomError', error => {
       context.console.error(error);
     });

packages/jest-fake-timers/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "lib": ["es2020", "dom"],
     "rootDir": "src",
     "outDir": "build"
   },

packages/jest-matcher-utils/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "lib": ["es2020", "dom"],
     "rootDir": "src",
     "outDir": "build"
   },

packages/jest-runtime/package.json

@@ -24,6 +24,7 @@
     "@jest/test-result": "^28.1.3",
     "@jest/transform": "^28.1.3",
     "@jest/types": "^28.1.3",
+    "@types/node": "*",
     "chalk": "^4.0.0",
     "cjs-module-lexer": "^1.0.0",
     "collect-v8-coverage": "^1.0.0",
@@ -43,7 +44,6 @@
     "@jest/test-utils": "^28.1.3",
     "@types/glob": "^7.1.1",
     "@types/graceful-fs": "^4.1.3",
-    "@types/node": "*",
     "jest-environment-node": "^28.1.3"
   },
   "engines": {

packages/pretty-format/src/__tests__/DOMCollection.test.ts

@@ -126,7 +126,7 @@ describe('DOMCollection plugin for list items', () => {
   });
 
   const expectedHTMLFormControlsCollection = [
-    'HTMLCollection [',
+    'HTMLFormControlsCollection [',
     '  <select>',
     '    <option',
     '      value="1"',

packages/pretty-format/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "lib": ["es2020", "dom"],
     "rootDir": "src",
     "outDir": "build"
   },