如何在 VueJS 中对 Vuex 动作进行单元测试

Posted 2023-02-22

【中文标题】如何在 VueJS 中对 Vuex 动作进行单元测试

【英文标题】：How to unit test if Vuex action has been dispatched in VueJS

【发布时间】：2017-10-04 13:05:10

【问题描述】：

我只想测试当我的App.vue 组件是created() 时是否调度了myAwesome 操作。这是你要测试的东西吗？我正在使用 Jasmine 进行这些测试。任何帮助都会很棒！

App.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

【参考方案1】：

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

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

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

（即检查是否初始化你的组件，调用store action的方法是否被调用，在我的例子中myawesomeaction将是methods对象中的一个mapAction名称）

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

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