如何使用Vue测试utils和Jest测试Vuex突变

Question

我至少查看了几篇关于嘲笑和测试Vuex操作的教程，但我自己无法成功实现它们。虽然我遵循了上面链接中提供的大部分步骤，但它总是会导致toHaveBeenCalled到false。您可以模拟Actions，而不必使用jest.fn()复制它们的实际功能，对吗？我不明白为什么我仍然不能成功完成这项任务

store.js

export default new Vuex.Store({
state: {
currentSequence: ''
},
actions: {
runGenerator({ commit, state }, currentSequence) {
// do something with currentSequence
}
}
})

Home.vue(注意，这不是这个组件的全部代码，但我列出了重要的代码，包括submit.prevent方法、包含表单的html以及vuex操作的调用位置)

<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

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()
})
})

运行测试后，我得到以下错误：

expect(jest.fn()).toHaveBeenColled()应调用mock函数，但未调用

我错过了什么？？伙计们，请开导我。。我一直在阅读网上提供的参考资料，似乎在网上找不到其他解决方案。

Answer 1

即使您在嘲笑这些操作，它们在技术上仍然是异步的。在测试vuex时，我总是使用flushPromises等待异步操作(这确保在继续执行之前解决任何活动的promise)。要将flushPromises添加到您的项目中，请执行以下操作：

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()
})

注意，测试函数现在被标记为async-