Question

我已经至少检查了couple的tutorials中的关于模拟和测试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（请注意，这不是该组件的全部代码，但我列出了重要的代码，包括commit.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()
  })
})

运行测试后，出现以下错误：

期望（jest.fn（））。toHaveBeenCalled（）预期已调用模拟函数，但未调用

我想念什么？请启发我。.我一直在阅读在线提供的参考资料，但是我似乎在网上找不到其他解决方案。

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

请注意，测试功能现已标记为异步-

如何使用Vue-test-utils和Jest测试Vuex变异

1 个答案: