使用Jest测试NUXT.js和Vue.js应用程序。获取';[vuex]模块命名空间在mapState()';和';[vuex]未知操作类型';中找不到
尽管我的理解是NUXT自动执行名称空间。因此,我无法在我的任何测试模块中测试或引用该存储。有人能给我小费吗?也许我可以在Nuxt应用程序中编辑命名空间属性?
下面是组件、存储和测试的代码。
ButtonComponent.vue:
<template>
<v-container>
<v-btn @buttonClick v-model="value"></v-btn>
</v-container>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data: {
return {
value: 25
}
}
methods: {
buttonClick(event) {
this.$store.dispatch('buttonComponent/setNewValue', valuePassedIn)
},
},
}
</script>
<style scoped></style>
buttonComponent.spec.js:
import Component from '../../Component'
import { mount, createLocalVue } from '@vue/test-utils'
import expect from 'expect'
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
const localVue = createLocalVue()
localVue.use(Vuex)
Vue.use(Vuetify)
describe('Component', () => {
let store
let vuetify
let actions
beforeEach(() => {
actions = {
actionClick: jest.fn()
}
store = new Vuex.Store({
actions,
})
vuetify = new Vuetify()
})
it('method sends value to store when button is clicked', async () => {
const wrapper = mount(Component, {
store,
localVue,
vuetify,
})
wrapper.find('.v-btn').trigger('click')
expect(actions.actionClick).toHaveBeenCalledWith('buttonComponent/setNewValue', 25)
})
})
ButtonComponent.js:
export const state = () => ({
value: 0,
})
export const mutations = {
SET_TO_NEW_VALUE(state, value) {
state.value = value
},
}
export const actions = {
setNewValue({ commit }, value) {
commit('SET_TO_NEW_VALUE', value)
},
}
解决方案
这样我就不必在这里再次编写它了,我会将您链接到我刚刚发布的一篇文章,该文章介绍了安装过程,以便您可以使用JEST测试您的Nuxt商店:https://medium.com/@brandonaaskov/how-to-test-nuxt-stores-with-jest-9a5d55d54b28
相关文章