Question

我想要设置以下组件，并希望在其上运行以下基本单元测试。

（我是Vue.js的新手，不确定哪些信息对解决我的问题很有价值。请询问其他一些特定的代码部分是否可以帮助您。）

user-information.vue：

<template>
<v-layout row wrap justify-center id="wrapper">
  <v-flex class="text-xs-center centered">
    <v-card>
      <v-card-title primary class="title">
        User Management
      </v-card-title>
    </v-card>
  </v-flex>
  </v-layout>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    users: state => state.userStore.users,
    status: state => state.userStore.status
  }),
  created() {
    this.$store.commit('userStore/setDefaultUserStatus');
    this.$store.dispatch('userStore/getAllUsers');
  },
  methods: {
    deleteUser
      this.$store.commit('userStore/setDefaultUserStatus');
      if (confirm('Are you sure?')) {
        this.$store.dispatch('userSTore/deleteUser', userId);
      }
    }
  }
}
</script>

LandingPage.spec.js：

import { mount } from '@vue/test-utils';
import UserInformation./../../src/renderer/components/User/user-information.vue';

describe('user-information.vue', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(UserInformation);
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

运行npm test时，出现以下错误：

$ npm test

> management-system@0.1.0 test /home/juri/develop/management-system
> jest

 FAIL  test/e2e/specs/Launch.spec.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

      at node_modules/jest/node_modules/jest-cli/build/TestScheduler.js:256:22

 FAIL  test/unit/specs/LandingPage.spec.js
  ● Console

    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'commit' of undefined"
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'commit' of undefined
          at VueComponent.created (/home/juri/develop/management-system/src/renderer/components/USer/user-information.vue:85:1)
          at callHook (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2919:21)
          at VueComponent.Vue._init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4628:5)
          at new VueComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4796:12)
          at createComponentInstanceForVnode (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4308:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4129:45)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)
    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in created hook: "TypeError: Cannot read property 'commit' of undefined"

      found in

      ---> <Anonymous>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'commit' of undefined
          at VueComponent.created (/home/juri/develop/management-system/src/renderer/components/User/user-information.vue:85:1)
          at callHook (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2919:21)
          at VueComponent.Vue._init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4628:5)
          at new VueComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4796:12)
          at createComponentInstanceForVnode (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4308:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4129:45)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)
    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'state' of undefined"
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'state' of undefined
          at VueComponent.mappedState (/home/juri/develop/management-system/node_modules/vuex/dist/vuex.common.js:793:31)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at Watcher.evaluate (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3247:21)
          at Proxy.computedGetter (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3505:17)
          at Proxy.render (/home/juri/develop/management-system/src/renderer/components/User/user-information.vue:275:417)
          at VueComponent.Vue._render (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4542:22)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:21)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4135:13)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)
    console.error node_modules/vue/dist/vue.runtime.common.js:589
      [Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

      found in

      ---> <Anonymous>
             <Root>
    console.error node_modules/vue/dist/vue.runtime.common.js:1739
      TypeError: Cannot read property 'state' of undefined
          at VueComponent.mappedState (/home/juri/develop/management-system/node_modules/vuex/dist/vuex.common.js:793:31)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at Watcher.evaluate (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3247:21)
          at Proxy.computedGetter (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3505:17)
          at Proxy.render (/home/juri/develop/management-system/src/renderer/components/User/user-information.vue:275:417)
          at VueComponent.Vue._render (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4542:22)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:21)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at init (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:4135:13)
          at createComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/juri/develop/management-system/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at mount (/home/juri/develop/management-system/node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
          at Object.test (/home/juri/develop/management-system/test/unit/specs/LandingPage.spec.js:26:21)
          at Object.asyncJestTest (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/home/juri/develop/management-system/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at process.internalTickCallback (internal/process/next_tick.js:77:7)

  ● user-information.vue › is a Vue instance

    TypeError: Cannot read property 'state' of undefined



      at VueComponent.mappedState (node_modules/vuex/dist/vuex.common.js:793:31)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.js:3247:21)
      at Proxy.computedGetter (node_modules/vue/dist/vue.runtime.common.js:3505:17)
      at Proxy.render (src/renderer/components/User/user-information.vue:275:417)
      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4542:22)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:21)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at init (node_modules/vue/dist/vue.runtime.common.js:4135:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.js:5606:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.js:5553:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6089:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2658:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5645:21)
      at Object.test (test/unit/specs/LandingPage.spec.js:26:21)

Test Suites: 2 failed, 2 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.625s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

我该怎么做才能解决此错误，它的根源是什么？据我所知，它似乎与Vuex有关，因为它抱怨commit()和dispatch()（Vuex函数）。但是我很困惑-我在简单的测试中没有使用存储在商店中的数据。

Answer 1

该错误表明您的套件中没有任何测试。那就是因为据我所知，您使用mocha作为测试框架，并且在此框架中测试的词是it而不是test。因此，请尝试运行此代码：

describe('user-information.vue', () => {
  it('is a Vue instance', () => {
    const wrapper = mount(UserInformation);
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});

如果仍然无法正常运行，请尝试安装Mocha（运行npm i mocha）

Answer 2

您似乎需要在测试中实例化Vuex。

您的组件具有此created()钩子，因此，只需创建它即可引用vuex实例。

created() {
  this.$store.commit('userStore/setDefaultUserStatus');
  this.$store.dispatch('userStore/getAllUsers');
},

您可以使用createLocalVue()获取隔离的Vue实例，并将其添加到Vuex，然后通过mountOptions将其传递到mount()。

您也可以mock the store，以便其他测试可以控制数据。

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'

const localVue = createLocalVue()
localVue.use(Vuex)

const storeOptions = {
  state: ...
  getters: ...
  mutations: ...
};
const mockStore = new Vuex.Store(storeOptions)

describe('user-information.vue', () => {

  let wrapper;
  beforeEach(() => {
    const mountOptions = {
      localVue,
      store: mockStore
    }
    wrapper = mount(UserInformation, mountOptions)
  });

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

使用Vuex的Vue.js-electron应用程序的安装测试

2 个答案: