Тест Vue Mock на основе обещаний в модуле - PullRequest
0 голосов
/ 29 ноября 2018

Я, к сожалению, не могу прикрепить весь код или создать гистологию, потому что проект, над которым я работаю, связан с работой, но я могу дать достаточно подробностей, чтобы я думаю, что это будет работать.

Я пытаюсьвысмеивать вызов к действию, которое хранится в другом модуле, но я не могу понять, как это сделать.Я могу создать шпион Jest для метода store.dispatch, но хочу разрешить обещание и убедиться, что предприняты следующие шаги.

Метод в SFC -

doSomething(data) {
  this.$store.dispatch('moduleA/moduleDoSomething',{data: data})
    .then(() => {
      this.$router.push({name: 'RouteName'})
    })
    .catch(err => {
      console.log(err)
      alert('There was an error.  Please try again.')

    })
},

Вот так выглядит мой тест:

import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import Component from '@/components/Component'
import moduleA from '@/store/modules/moduleA'

const localVue = createLocalVue()

localVue.use(Vuex)
localVue.use(Vuetify)

describe('Component.vue', () => {
  let actions
  let store

  const $router = []

  beforeEach(() => {
    actions = {
      moduleDoSomething: jest.fn((payload) => {
        return Promise.resolve({
          status: 200,
        })
     })
    }

    store = new Vuex.Store({
      state: {},
      modules: {
        moduleA: {
          actions
        }
      },
    })
  })

  it('does something', () => {
    const wrapper = mount(Component, {
      store,
      localVue,
      mocks: {
        $router,
      },
    })
    let button = wrapper.find('button that calls doSomething')
    button.trigger('click')
    expect(actions.moduleDoSomething).toHaveBeenCalled()
    expect(wrapper.vm.$router[0].name).toBe('RouteName')
  })
})

Следующий тест пройден, но я не хочу просто проверять, было ли отправлено действие;Я также хочу проверить вещи в блоке "then".

  it('does something', () => {
    const dispatchSpy = jest.spyOn(store, 'dispatch')
    const wrapper = mount(Component, {
      store,
      localVue,
      mocks: {
        $router,
      },
    })
    let button = wrapper.find('button that calls doSomething')
    button.trigger('click')
    expect(dispatchSpy).toHaveBeenCalledWith('moduleA/moduleDoSomething',{data: data})
  })
})

1 Ответ

0 голосов
/ 30 ноября 2018

Мне удалось решить эту проблему, просто сделав пространство имен модулей в проверяемом хранилище.

store = new Vuex.Store({
  state: {},
  modules: {
    moduleA: {
      actions,
      namespaced: true
    }
  },
})

Я удалю вопрос чуть позже

...