我有一个基于 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 ,我还尝试了来自互联网的不同解决方案 - 不幸的是没有运气。
我将不胜感激任何帮助。
最佳答案
store.dispatch = jest.fn()
使调度函数成为空操作,预计不会调用 saveSomeData
因此,调度其他操作。
这个断言没有用,因为它基本上测试了前一行:
expect(store.dispatch).toHaveBeenCalledWith('myModule/saveSomeData', payload)
store.dispatch
spy 或 stub 不应该影响 context.dispatch
in actions 因为上下文是在商店初始化时创建的,并且已经使用原始 dispatch
.可能没有必要这样做,因为这些是应该测试的操作,而不是 Vuex 本身。可以使用
jest.mock
在模块级别监视操作和 jest.requireActual
, 或在必要时在 Vuex 模块对象上本地。模块 spy 和模拟应该发生在顶层。对象 spy 和模拟应该在存储实例化之前发生。在这种情况下,经过测试的单位是
myModule
行动,ActiveService.setActive
和 otherModule/createId
可以被认为是不同的单位,应该被 mock 。如果 postRoutes
包含副作用,它们也可以被 mock 。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
关于javascript - 如何对 Vue 应用程序中的嵌套操作进行单元测试?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61119074/