TypeError: 정의되지 않은 속성을 읽을 수 없습니다('html' 읽기).

TypeError: 정의되지 않은 속성을 읽을 수 없습니다('html' 읽기).

저는 현재 제 프로젝트에 Jest를 소개하려고 합니다.

그러나 초기 설정 중에 이 오류가 발생하여 제대로 실행되지 않습니다.

어떻게 해결해야 하나요?

저는 현재 vue-cli의 vue2를 사용하고 있습니다.

● 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)

이것은 제 시험 코드입니다.

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);
  });
});

여기 제 소포입니다. 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",
  }

여기 제 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/**"],
};

어떻게 해결해야 하나요?

저는 제 반응 앱을 just 28로 업데이트할 때도 같은 문제가 있었습니다.문제는 just 27에서 아직 필요하지 않은 just-environment-jsdom 패키지 누락이었습니다.

https://jestjs.io/docs/28.x/upgrading-to-jest28 을 참조하십시오.

다음을 생성해야 합니다.localVue인스턴스 및 사용Vuetify그 위에. 이것은 어느 것이든 달성될 수 있습니다.tests/setup.js파일(모든 농담 테스트에 대해 실행됨) 또는 Vuetify를 사용하는 각 단위 테스트에서 개별적으로 실행됩니다.

샘플 코드 없음setup.js(사용하는 경우)setup.js코드가 약간 다를 수 있습니다. 아래 문서를 확인할 수 있습니다.

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);
  });
});

설명서는 다음과 같습니다. https://vuetifyjs.com/en/getting-started/unit-testing/ #bootstraping-detify

그것은 나를 위해 추가되었습니다.jest-environment-jsdom.

테스트의 파일 종료를 tsx에서 ts로 변경하여 수정하였습니다.

언급URL : https://stackoverflow.com/questions/72169503/typeerror-cannot-read-properties-of-undefined-reading-html