Cannot read property 'html' of undefined after jest update

Question

For an angular v12 project which uses jest I just updated jest to version 28. Now, however, I get the following error

FAIL  src/app/components/update-input/update-input.directive.spec.ts
● Test suite failed to run

  TypeError: Cannot read property 'html' of undefined

    at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:72:44)

Here is my tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest", 
      "node",
      "Chrome"
    ],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "Node",
    "module": "es2020",
    "files": ["src/test.ts", "src/polyfills.ts"],
    "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
  },
}

and jest.config.js

const { pathsToModuleNameMapper } = require("ts-jest/utils");
const { compilerOptions } = require("./tsconfig");

module.exports = {
  preset: "jest-preset-angular",
  // preset: 'jest-preset-angular/presets/defaults-esm',
  roots: ["<rootDir>/src/"],
  testMatch: ["**/+(*.)+(spec).+(ts)"],
  setupFilesAfterEnv: ["<rootDir>/src/test.ts"],
  collectCoverage: true,
  coverageReporters: ["html"],
  coverageDirectory: "coverage/app",
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: "<rootDir>/",
  }),
  transform: {
    '^.+\\.(ts|js|html|svg)$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'js', 'html', 'svg'],
  // extensionsToTreatAsEsm: ['.ts'],
  // globals: {
  //   'ts-jest': {
  //     tsconfig: '<rootDir>/tsconfig.spec.json',
  //     stringifyContentPathRegex: '\\.html$',
  //     useESM: true,
  //   },
  // }
};

The problems with my tests started when I added a web-worker to my project, which uses import.meta.url

 this.worker = new Worker(new URL('../webworkers/search.worker', import.meta.url), { type: 'module' });

Any suggestion what is going on here and how to fix this?

Also struggling with this for angular 14 – Pieterjan Jun 10 '22 at 13:57 — Pieterjan, Jun 10 '22 at 13:57

score 13 · Answer 1 · answered Jun 10 '22 at 13:44

13

I had the same error and found the solution here: enter link description here

yarn add --dev jest-environment-jsdom

answered Jun 10 '22 at 13:44

Jean Claveau

1,101
1
13
15

score 10 · Answer 2 · answered May 12 '22 at 15:53

10

I had this same issue and noticed that jest-environment-jsdom was on version 27. I installed v28 to match the jest version and it stopped giving this error.

My tests are still failing so YMMV!

answered May 12 '22 at 15:53

Lydia

136
4

In my package.json there is no `jest-environment-jsdom`. But I noticed that I have many outdated packages. If updating them fixes it, I'll post it here! – Jeanluca Scaljeri May 12 '22 at 19:19
No it wasn't in mine either, but it was in the node modules as a transitive dependency. When I put it in my package JSON with the updated version number then it brought the right one in. – Lydia May 14 '22 at 11:09

Nevada · Answer 3 · 2023-03-04T13:55:05.053

● Test suite failed to run

TypeError: Cannot read properties of undefined (reading 'html')

  at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:72:44)

I fixed, by removed node-modules in projects and reinstall the dependencies ⤵️

Mac OS

sudo npm install jest-environment-jsdom@29.4.3 --save-dev

Node version

v18.14.0

Package.json

  "devDependencies": {
    "@babel/preset-env": "^7.10.4",
    "@testing-library/dom": "^7.20.0",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/user-event": "^12.0.11",
    "babel-jest": "^26.1.0",
    "jest": "^26.1.0",
    "jest-environment-jsdom": "^29.4.3",
    "jest-html-reporter": "^3.1.3"
  }

You can also try another version of jest-environment-jsdom

sudo npm install jest-environment-jsdom@29.3.1 --save-dev

Cannot read property 'html' of undefined after jest update

3 Answers3