Как протестировать мутации Vuex с помощью Vue-test-utils и Jest

Я проверил по крайней мере пару из учебные пособия по имитации и тестированию действий 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 () Ожидается, что была вызвана фиктивная функция, но она не была вызвана

Что я пропустил?? Пожалуйста, просветите меня, ребята .. Я продолжал читать ссылку, предоставленную в Интернете, и, похоже, не могу найти в Интернете других решений.


javascript unit-testing jestjs vue.js vue-test-utils
person The Bassman    schedule 31.12.2018    source источник
comment
Если вы добавите console.log в setNextVal (), можете ли вы подтвердить, что видите вывод оператора журнала в выводе jest, подтверждающий, что form.trigger работает?   -  person chrismarx    schedule 15.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Даже если вы издеваетесь над действиями, они все равно технически асинхронны. При тестировании vuex я всегда жду асинхронных действий с flushPromises (что гарантирует выполнение любых активных обещаний перед продолжением выполнения). Чтобы добавить 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-

person chrismarx    schedule 18.01.2019