如何使用 Vue-test-utils 和 Jest 测试 Vuex 突变答案

【问题标题】：How to test Vuex Mutations using Vue-test-utils and Jest如何使用 Vue-test-utils 和 Jest 测试 Vuex 突变
【发布时间】：2019-05-28 03:01:30
【问题描述】：

我已经检查了至少一个 tutorials 的 couple 来模拟和测试 Vuex 动作，但我无法自己成功地实现它们。尽管我遵循了上面链接中提供的大部分步骤，但它总是会导致 toHaveBeenCalled 到 false。您可以模拟操作，而不必使用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()).toHaveBeenCalled() 预期的模拟函数已被调用，但没有被调用

我错过了什么？请各位大神赐教。我一直在阅读网上提供的参考资料，但我似乎无法在网上找到其他解决方案。

【问题讨论】：

如果你在 setNextVal() 中添加了一个 console.log，你能确认你在你的 jest 输出中看到了 log 语句输出，验证 form.trigger 是否工作？

标签： javascript unit-testing vue.js jestjs vue-test-utils

【解决方案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-

【讨论】：