mount () и shallowMount () из @ vue / test-utils throw TypeError: Невозможно прочитать «компоненты» свойства undefined - PullRequest
Новая
       54

mount () и shallowMount () из @ vue / test-utils throw TypeError: Невозможно прочитать «компоненты» свойства undefined

0 голосов
/ 06 апреля 2020

Я пытаюсь настроить юнит-тестирование для моего приложения Vue, но каждый раз, когда я запускаю свой тест, функция mount или shallowMount выдает мне TypeError: Не удается прочитать свойство 'component' с неопределенной ошибкой. Я пробовал @ vue / test-utils версий 1.0.0-бета.32, 1.0.0-бета.31 и 1.0.0-бета.27, но безрезультатно.

Сообщение об ошибке: 

 ActuatorController
    ✕ is a Vue instance (24ms)

  ● ActuatorController › is a Vue instance

    TypeError: Cannot read property 'components' of undefined

       5 | 
       6 | beforeEach(() => {
    >  7 |   wrapper = mount(ActuatorController);
         |             ^
       8 | });
       9 | 
      10 | afterEach(() => {

      at createInstance (node_modules/@vue/test-utils/dist/vue-test-utils.js:2537:22)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:13525:18)
      at Object.<anonymous> (apps/actuator_controller/static/actuator_controller/__tests__/ActuatorController.test.js:7:13)

  ● ActuatorController › is a Vue instance

    TypeError: Cannot read property 'isVueInstance' of undefined

      14 | describe("ActuatorController", () => {
      15 |   test("is a Vue instance", () => {
    > 16 |     expect(wrapper.isVueInstance()).toBeTruthy();
         |                    ^
      17 |   });
      18 | });
      19 | 

      at Object.<anonymous> (apps/actuator_controller/static/actuator_controller/__tests__/ActuatorController.test.js:16:20)

  ● ActuatorController › is a Vue instance

    TypeError: Cannot read property 'destroy' of undefined

       9 | 
      10 | afterEach(() => {
    > 11 |   wrapper.destroy();
         |           ^
      12 | });
      13 | 
      14 | describe("ActuatorController", () => {

      at Object.<anonymous> (apps/actuator_controller/static/actuator_controller/__tests__/ActuatorController.test.js:11:11)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        20.601s

Вот мой пакет. json

  "name": "igp-package",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "dependencies": {
    "lodash": "^4.17.15",
    "mxgraph": "^4.1.0",
    "vue": "^2.6.11",
    "vuetify": "^2.2.15"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@vue/babel-preset-app": "^4.2.3",
    "@vue/test-utils": "^1.0.0-beta.32",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^25.2.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "deepmerge": "^4.2.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-jest": "^23.8.2",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^6.2.2",
    "fibers": "^4.0.2",
    "file-loader": "^4.3.0",
    "flush-promises": "^1.0.2",
    "jest": "^25.2.4",
    "jest-transform-stub": "^2.0.0",
    "jest-serializer-vue": "^2.0.2",
    "json-loader": "^0.5.7",
    "prettier": "^2.0.2",
    "sass": "^1.26.2",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.0.0",
    "vue-cli-plugin-webpack-bundle-analyzer": "~2.0.0",
    "vue-jest": "^3.0.5",
    "vue-loader": "^15.9.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.4.3",
    "webpack": "^4.41.2",
    "webpack-bundle-analyzer": "^3.6.1",
    "webpack-cli": "^3.3.10"
  }
}

Мой jest.config. js

module.exports = {
  verbose: true,
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.(js|jsx)?$": "babel-jest",
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: ["**/__tests__/*.test.(js|jsx|ts|tsx)"],
  collectCoverage: false,
  collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
};

Вот файл теста: 

import { mount } from "@vue/test-utils";
import { ActuatorController } from "../Vue/ActuatorController.vue";

let wrapper;

beforeEach(() => {
  wrapper = mount(ActuatorController);
});

afterEach(() => {
  wrapper.destroy();
});

describe("ActuatorController", () => {
  test("is a Vue instance", () => {
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

И наконец компонент, используемый для теста: 

<template>
  <div>
    <h1>Title</h1>
  </div>
</template>

<script>
export default {
  name: "ActuatorController",
};
</script>

<style scoped></style>

Надеюсь, это вся необходимая информация. Заранее спасибо за ваши усилия, чтобы помочь мне :)

Ура, Нико

1 Ответ

0 голосов
/ 06 апреля 2020

Ошибка означает, что mount пытается прочитать components свойство ActuatorController и завершается ошибкой.

Компоненты - это экспорт по умолчанию в Vue отдельные файловые компоненты, тогда как ActuatorController называется import и не определено.

Должно быть: 

import ActuatorController from "../Vue/ActuatorController.vue";
...