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??

Answer 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

Answer 2

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://jestjs.io/docs/28.x/upgrading-to-jest28

Answer 3

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

Answer 4

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