关于@ vue / test-utils中的vue.js：mount()和shallowMount()引发TypeError：无法读取未定义的属性’components’


mount() and shallowMount() from @vue/test-utils throw TypeError: Cannot read property 'components' of undefined

我正在尝试为Vue应用设置单元测试，但是每次运行测试时，mount或shallowMount函数都会抛出TypeError：无法读取未定义错误的属性\\ components \\。我尝试了@ vue / test-utils版本1.0.0-beta.32、1.0.0-beta.31和1.0.0-beta.27，但无济于事。

错误消息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 ActuatorController
    a?? is a Vue instance (24ms)

  a—? ActuatorController a€o 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. (apps/actuator_controller/static/actuator_controller/__tests__/ActuatorController.test.js:7:13)

  a—? ActuatorController a€o 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. (apps/actuator_controller/static/actuator_controller/__tests__/ActuatorController.test.js:16:20)

  a—? ActuatorController a€o is a Vue instance

    TypeError: Cannot read property 'destroy' of undefined

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

      at Object. (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

这是我的package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 "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

1
2
3
4
5
6
7
8
9
10
11
12
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/**"],
};

此处是测试文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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();
  });
});

最后是用于测试的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 
    Title
 
</template>


export default {
  name:"ActuatorController",
};


<style scoped></style>

我希望这是所有必要的信息。在此先感谢您为我提供的帮助:)

干杯，
尼可

该错误表示mount尝试读取ActuatorController的components属性而失败。

组件是Vue单个文件组件中的默认导出，而ActuatorController被命名为import且未定义。

应为：

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