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

user_15560789 0
Viewed 9425

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

vue-jest vuejs2 jestjs
2 Answers
user_59071890

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

user_114396150
Related