Как проверить мутации Vuex, используя Vue-test-utils и Jest - PullRequest
Новая
       17

Как проверить мутации Vuex, используя Vue-test-utils и Jest

0 голосов
/ 31 декабря 2018

Я проверил по крайней мере пару из учебных пособий по поводу насмешек и тестирования действий 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()
  })
})

Послепри выполнении теста я получаю следующую ошибку:

Ожидается (jest.fn ()). toHaveBeenCalled () Ожидается, что фиктивная функция была вызвана, но она не была вызвана

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

1 Ответ

0 голосов
/ 18 января 2019

Даже если вы издеваетесь над действиями, они все равно технически асинхронны.При тестировании 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-

...