如何对 Vue 应用程序中的嵌套操作进行单元测试？答案

【问题标题】：How to unit test nested Actions in a Vue application?如何对 Vue 应用程序中的嵌套操作进行单元测试？
【发布时间】：2020-07-21 22:48:05
【问题描述】：

我有一个基于 TypeScript 的 Vue 项目，使用 Jest 作为测试框架。我正在尝试测试的模块中有操作。

我的操作如下所示：

  @Action({})
  saveSomeData (payload: any): Promise<any> {
    const { isActive, id, routes } = payload
    return this.context.dispatch('otherModule/createId', '', { root: true })
        .then((id: string) => {
          payload = { isActive, id, routes, type: 'postRoutes' }
          return this.context.dispatch('submitRoutes', payload)
        })
  }

  @Action({})
  submitRoutes (payload: any): Promise<any> {
    const { isActive, id, routes, type } = payload
    return ActiveService.setActive(id)
        .then(() => this.context.dispatch(type, { id, routes }))
  }

这是我的测试的样子：

// Mocking createId in otherModule module to return ID
jest.mock('@/store/modules/otherModule', () => ({
  createId: jest.fn(() => Promise.resolve([
    {
      id: 'someId'
    }
  ]))
}))

...

describe('Testing save MyModule data', () => {
    let store: any

    beforeEach(() => {
      store = new Vuex.Store({
        modules: {
          myModule,
          otherModule
        }
      })
    })

    test('Should call createId and then call submitRoutes if ID is empty', async () => {
      const payload = {
        isActive: true,
        id: '',
        routes: []
      }
      const pld = {
        isActive: true,
        id: 'someId',
        routes: [],
        type: 'postRoutes'
      }

      store.dispatch = jest.fn()
      await store.dispatch('myModule/saveSomeData', payload)
      expect(store.dispatch).toHaveBeenCalledWith('myModule/saveSomeData', payload)
      expect(store.dispatch).toHaveBeenCalledWith('otherModule/createId') // <-- here I get an error
      expect(store.dispatch).toHaveBeenCalledWith('myModule/submitRoutes', pld)
    })
  })

问题：我的测试失败了，我还没有找到任何方法让它工作。

错误：

Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "otherModule/createId"
Received: "myModule/saveSomeData", {"id": "", "isActive": true, "routes": []}

Number of calls: 1

我的尝试

我已经关注了Vuex 和Jest 的文档，我还尝试了来自互联网的不同解决方案 - 不幸的是没有运气。

我将不胜感激。

【问题讨论】：

标签： javascript typescript vue.js jestjs vuex

【解决方案1】：

store.dispatch = jest.fn() 使 dispatch 函数成为空操作，它不应该调用 saveSomeData 并因此调度其他操作。

这个断言没有用，因为它基本上测试了上一行：

expect(store.dispatch).toHaveBeenCalledWith('myModule/saveSomeData', payload)

store.dispatch spy 或 stub 不应影响操作中的 context.dispatch，因为上下文是在存储初始化时创建的，并且已经使用原始 dispatch。可能没有必要这样做，因为这些是应该测试的操作，而不是 Vuex 本身。

可以使用 jest.mock 和 jest.requireActual 在模块级别监视操作，或者在必要时在 Vuex 模块对象上本地监视操作。模块间谍和模拟应该发生在顶层。对象间谍和模拟应该在存储实例化之前发生。

在这种情况下，测试单元是 myModule 动作，ActiveService.setActive 和 otherModule/createId 可以被认为是不同的单元，应该被模拟。如果postRoutes 包含副作用，它们也可以被模拟。

jest.spyOn(otherModule.actions, 'createId');
jest.spyOn(ActiveService, 'setActive');
store = new Vuex.Store(...)

...

otherModule.actions.createId.mockValue(Promise.resolve('stubbedId'));
ActiveService.setActive.mockValue(Promise.resolve());
await store.dispatch('myModule/saveSomeData', payload)
// assert otherModule.actions.createId call
// assert ActiveService.setActive call
// assert otherModule.actions.postRoutes call

【讨论】：