Question

很遗憾，我无法附加所有代码或创建要点，因为我正在从事的项目与工作有关，但是我可以提供足够的细节，使我认为它可以工作。

我正在尝试模拟对存储在不同模块中的动作的调用，但是对我而言，我不知道该怎么做。我可以在store.dispatch方法上创建一个Jest间谍，但我希望能够解决Promise，并确保已采取后续步骤。

SFC中的方法是

locals()

这是我的测试结果：

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.')

    })
},

以下测试通过了，但我不想仅测试该动作是否已分发；我还想测试“ then”块中的内容。

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

Answer 1

我设法通过简单地使模块在模拟存储中命名为空间来解决此问题。

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

我将删除一点问题

模块中基于Vue Test Mock承诺的行动

1 个答案: