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

【问题标题】：Setup test for Vue.js-electron app which uses Vuex使用 Vuex 的 Vue.js-electron 应用程序的设置测试
【发布时间】：2019-04-23 07:00:57
【问题描述】：

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

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

用户信息.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 函数）。但我很困惑 - 在我的简单测试中，我没有使用存储在商店中的数据。

【问题讨论】：

    标签： unit-testing vue.js electron jestjs vuex


    【解决方案1】：

    看来您需要在测试中实例化 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();
  });
});

    【讨论】：

      猜你喜欢
      • 2019-04-16
      • 2023-01-29
      • 2020-05-05
      • 1970-01-01
      • 2021-06-16
      • 2019-05-24
      • 1970-01-01
      • 2017-03-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode