使用 Vuex 的 Vue.js-electron 应用程序的设置测试
Posted
技术标签:
【中文标题】使用 Vuex 的 Vue.js-electron 应用程序的设置测试【英文标题】：Setup test for Vue.js-electron app which uses Vuex 【发布时间】：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 函数）。但我很困惑 - 在我的简单测试中，我没有使用存储在商店中的数据。
【问题讨论】：
【参考方案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();
);
);
【讨论】：
以上是关于使用 Vuex 的 Vue.js-electron 应用程序的设置测试的主要内容，如果未能解决你的问题，请参考以下文章