如何单元测试 Vuex 动作是否已在 VueJS 中分派

Question

我只想测试myAwesome当我的App.vue组件是created(). 这是你要测试的东西吗？我正在使用 Jasmine 进行这些测试。任何帮助都是极好的！

应用程序.js

describe('when app is created()', () => {
  it('should dispatch myAwesomeAction', (done) => {

    const actions = {
      myAwesomeAction() {
        console.log('myAwesomeAction')
        // commit()
      }
    }

    const state = {
      myAwesomeAction: false
    }

    const mutations = {
      LOAD_SUCCESS(state) {
        state.myAwesomeAction = true
      }
    }

    const options = {
      state,
      mutations,
      actions
    }

    const mockStore = new Vuex.Store(options)

    spyOn(mockStore, 'dispatch')

    const vm = new Vue({
      template: '<div><component></component></div>',
      store: mockStore,
      components: {
        'component': App
      }
    }).$mount()

    Vue.nextTick(() => {
      expect(mockStore.dispatch).toHaveBeenCalled()
      expect(mockStore.dispatch).toHaveBeenCalledWith('myAwesomeAction')
      done()
    })
  })
})

错误：

1) should dispatch myAwesomeAction
     App
     Expected spy dispatch to have been called.
webpack:///src/views/App/test/App.spec.js:49:6 <- index.js:50916:50
webpack:///~/vue/dist/vue.esm.js:505:15 <- index.js:3985:24
nextTickHandler@webpack:///~/vue/dist/vue.esm.js:454:0 <- index.js:3934:16
     Expected spy dispatch to have been called with [ 'loadOrganisation' ] but it was never called.
webpack:///src/views/App/test/App.spec.js:50:54 <- index.js:50918:54
webpack:///~/vue/dist/vue.esm.js:505:15 <- index.js:3985:24
nextTickHandler@webpack:///~/vue/dist/vue.esm.js:454:0 <- index.js:3934:16

Answer 1

问题是，您正在尝试从组件对存储进行单元测试，因此当您模拟某些元素并依赖其他元素中的真实功能时，会出现一些问题。我不是 vuex 方面的专家，我也遇到过类似的问题，试图监视存储操作并调用组件的方法（不记得问题是什么，我记得我确实浪费了半天时间）。

我的建议：将组件作为单元进行测试，然后将存储模块作为单元进行测试，这意味着您可以在您的应用程序组件中进行监视

spyOn(vm, 'myAwesomeAction');
Vue.nextTick(() => {
    expect(vm.myAwesomeAction).toHaveBeenCalled()
    done()
});

（也就是说，检查是否初始化您的组件，调用存储操作的方法是否被调用，在我的示例中，myawesomeaction 将是方法对象中的 mapAction 名称）

然后，您可以对您的商店进行单元测试，并检查如果您调用 myawesomeaction ，该组件上的突变将会发生

在此处检查测试操作助手： https: //vuex.vuejs.org/en/testing.html