unit-testing - 使用 Vuex 的 Vue.js-electron 应用程序的设置测试

Question

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

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

用户信息.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

看起来您需要在测试中实例化 Vuex。

你的组件有这个 created()钩子(Hook)，所以只需创建它，您就可以引用 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();
  });
});