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

Question

I am trying to introduce Jest to my current project.

However, during the initial setup, I encountered this error and it is not running properly.

How can I solve this?

I am currently using vue2 from vue-cli.

● 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)
      at async TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:317:13)
      at async runJest (node_modules/@jest/core/build/runJest.js:407:19)
      at async _run10000 (node_modules/@jest/core/build/cli/index.js:338:7)
      at async runCLI (node_modules/@jest/core/build/cli/index.js:190:3)

This is my test code.

import SettlementProcessing from "@/views/calculate/SettlementProcessing.vue";
import { shallowMount } from "@vue/test-utils";
import Vuetify from "vuetify";
describe("Settlement Component", () => {
  let vuetify;
  beforeEach(() => {
    vuetify = new Vuetify();
  });
  it("정산 처리 타이틀이 나와야 한다.", () => {
    const sc = shallowMount(SettlementProcessing, { vuetify });
    expect(true).toBe(true);
  });
});

Here is my package.json.

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/test-utils": "^2.0.0-rc.21",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^28.1.0",
    "jest": "^28.1.0",
    "vue-cli-plugin-vuetify": "~2.4.0",
    "vue-jest": "^3.0.7",
  }

Here is my jest.config.json.

// jest.config.js
module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  moduleFileExtensions: [
    "js",
    "json",
    "vue",
  ],
  transform: {
    "^[^.]+.vue$": "vue-jest",
    "^.+\\.js$": "babel-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)",
    "**/?(*.)+(spec|test).[jt]s?(x)",
  ],
  testPathIgnorePatterns: ["/node_modules/", "/dist/"],
  collectCoverage: false,
  collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
};

How can I solve this??

Can you try to add the following property in your jest.config.json file: testEnvironment: 'jsdom' — Ovidijus Parsiunas
– Ovidijus Parsiunas, Commented May 9, 2022 at 14:50

Nash Bridges · Accepted Answer · 2024-05-24 06:38:09Z

60

I had the same issue when updating my react app to jest 28. The issue was the missing jest-environment-jsdom package which was not yet necessary in jest 27.

See https://jest-archive-august-2023.netlify.app/docs/28.x/upgrading-to-jest28

edited May 24, 2024 at 6:38

Nash Bridges

2,37814 silver badges19 bronze badges

answered May 10, 2022 at 5:08

Jochen

6844 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ëuclïdës Ďŕÿ'C Over a year ago

on your terminal run: yarn add --dev jest-environment-jsdom

Berty Over a year ago

the link no longer works, maybe you can update the link to here? jest-archive-august-2023.netlify.app/docs/28.x/…

arunppsg · Accepted Answer · 2023-01-29 10:51:22Z

10

It was fixed for me by adding jest-environment-jsdom.

answered Jan 29, 2023 at 10:51

arunppsg

1,60219 silver badges26 bronze badges

Comments

ValleyCrisps · Accepted Answer · 2022-05-09 23:42:08Z

1

You should create a localVue instance and use Vuetify on it. This can be achieved either in a tests/setup.js file (which runs for all jest tests) or separately in each unit test that uses Vuetify.

Sample code without setup.js (if you use setup.js, the code will be slightly different, you can check the documentation below)

import SettlementProcessing from "@/views/calculate/SettlementProcessing.vue";
import { createLocalVue, shallowMount } from "@vue/test-utils";
import Vuetify from "vuetify";

const localVue = createLocalVue()
localVue.use(Vuetify)

describe("Settlement Component", () => {
  it("정산 처리 타이틀이 나와야 한다.", () => {
    const sc = shallowMount(SettlementProcessing, { localVue } );
    expect(true).toBe(true);
  });
});

The documentation is here: https://vuetifyjs.com/en/getting-started/unit-testing/#bootstrapping-vuetify

answered May 9, 2022 at 23:42

ValleyCrisps

4163 silver badges9 bronze badges

2 Comments

김정수 Over a year ago

I tried the same with the method you pointed out, but I get the same error. I don't know why the error occurs..

ValleyCrisps Over a year ago

Oh, in that case please ignore my answer. It was worth a try.

JuliViews · Accepted Answer · 2023-03-15 09:31:46Z

1

It was fixed for me by changing the file ending of the test from tsx to ts

answered Mar 15, 2023 at 9:31

JuliViews

111 bronze badge

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related