如何使用Vue-test-utils和Jest测试Vuex变异 [英] How to test Vuex Mutations using Vue-test-utils and Jest
问题描述
我至少检查了夫妇 教程有关模拟和测试Vuex动作的信息,但我无法独自成功实现它们.尽管我遵循上面链接中提供的大多数步骤,但总是会出现toHaveBeenCalled
至false
的情况.您可以模拟动作,而不必使用jest.fn()
复制它们的实际功能,对吗?我不明白为什么我仍然无法成功实现这一目标.
I have checked at least a couple of tutorials on mocking and testing Vuex actions but I wasn't able to successfully implement them on my own. It would always result having toHaveBeenCalled
to false
though I followed most of the steps provided on the links above. You can mock Actions without having to replicate their actual functionality using jest.fn()
right? I don't get why I still can't successfully pull this off.
store.js
export default new Vuex.Store({
state: {
currentSequence: ''
},
actions: {
runGenerator({ commit, state }, currentSequence) {
// do something with currentSequence
}
}
})
Home.vue(请注意,这不是该组件的全部代码,但我列出了重要的代码,包括Submit.prevent方法,包含表单的html以及调用vuex动作的位置)
Home.vue (Take note that this not the entire code for this component but I listed the important ones including the submit.prevent method, the html that contains the form and where the vuex action is called)
<template>
<v-app id="inspire">
<v-form @submit.prevent="setNextVal" id="sequence-form">
<!-- form contents here -->
</v-form>
</v-app>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
setNextVal() {
this.runGenerator(this.form.currentSequence)
this.form.currentValue = this.getCurrentValue
},
...mapActions([
'runGenerator'
]),
}
}
</script>
store.spec.js
store.spec.js
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import Home from '@/views/Home.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
Vue.use(Vuetify)
describe('Home.vue', () => {
let actions
let store
beforeEach(() => {
actions = {
runGenerator: jest.fn()
}
store = new Vuex.Store({
state: {
currentSequence: ''
},
actions
})
})
it('Dispatches "runGenerator" when submit.prevent has been triggered', () => {
const wrapper = shallowMount(Home, { store, localVue })
const form = wrapper.find('#sequence-form')
form.trigger('submit.prevent')
expect(actions.runGenerator).toHaveBeenCalled()
})
})
运行测试后,出现以下错误:
After running the test I get the following error:
expect(jest.fn()).toHaveBeenCalled() 预期已调用模拟函数,但未调用
expect(jest.fn()).toHaveBeenCalled() Expected mock function to have been called, but it was not called
我想念什么?请赐教给我..我一直在阅读在线提供的参考资料,但似乎无法在网上找到其他解决方案.
What did I miss?? Please enlighten me guys.. I kept reading the reference provided online and I can't seem to find some other solutions online.
推荐答案
即使您模拟了动作,但从技术上讲它们仍然是异步的.在测试vuex时,我总是等待带有flushPromises的异步操作(这可以确保在继续执行之前解决所有活动的Promise).要将flushPromises添加到您的项目中,请执行以下操作:
Even though you're mocking the actions, they're still technically asynchronous. When testing vuex, I always await async actions with flushPromises (which ensures any active promises are resolved before continuing execution). To add flushPromises to your project do the following:
npm i -D flush-promises
然后在您的测试中:
import flushPromises from 'flush-promises'
//...
it('Dispatches "runGenerator" when submit.prevent has been triggered', async() => {
const wrapper = shallowMount(Home, { store, localVue })
const form = wrapper.find('#sequence-form')
form.trigger('submit.prevent')
await flushPromises();
expect(actions.runGenerator).toHaveBeenCalled()
})
请注意,测试功能现在已标记为异步-
Note that the test function is now labeled as async-
这篇关于如何使用Vue-test-utils和Jest测试Vuex变异的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!