Javascript 使用带有Jest的vue测试utils测试方法的内部逻辑

如何测试以下方法的内部逻辑

例如：

异步方法（）{
this.isLoading=true；
等待这一点。获取报价（）；
this.isLoading=false；
这个.router.push（“/某处”）；
}

---

因此，我有一个方法，可以切换

isLoading

，调用一个动作，然后路由到某个地方。如何确保

isLoading

已正确切换（操作调用前为true，操作调用后为false）？

您必须将其提取出来。isLoading行到新方法setLoading（）中并检查它是否被调用。

shallowMount/

mount

的第二个参数是可用于在安装时覆盖组件的数据支柱的参数。这允许您传入模拟

isLoading

数据属性的属性，然后允许您验证在测试方法中修改了属性：

it（'setisloading'，（）=>{
const isLoadingSetter=jest.fn（）
常量包装=浅量（MyComponent{
数据（）{
返回{
//为组件中的'This.isLoading=value'调用此setter。
设置isLoading（值）{
isLoadingSetter（值）
}
}
}
})
//...
})

然后，您可以使用with检查对模拟setter的每个调用的参数。由于您希望测试

async

方法的效果，因此在做出任何断言之前，您必须等待

方法调用：

it（'setisloading'，async（）=>{
//...
wait wrapper.vm.method（）
期望（加载更好）。已被调用的时间（2）
expect（isLoadingSetter.mock.calls.[0][0]）.toBe（true）
expect（isLoadingSetter.mock.calls.[1][0]）.toBe（false）
})

如果您还想验证是否调用了
GET_OFFERS（）
，则可以在安装之前在组件的方法上使用：

it（'get offers'，async（）=>{
const getOfferSpy=jest.spyOn（MyComponent.methods，'GET_OFFERS'）
常量wrapper=shallowMount（MyComponent，/*…*/）
wait wrapper.vm.method（）
期望（getOfferSpy）。已被调用的时间（1）
})
这真的只有一种方法吗？Jest（或一般的测试）模式是为了阻塞代码？我不知道你的意思是什么，但你不能分析你正在测试的函数执行的方式。只能通过调用其他函数来检查它是否执行了某些操作。实际上，如果您想让您的函数很好地适合于测试目的，您必须将函数内部使用的数据与外部数据分开。所以它可以是一个更纯净的。你能用你的案例在代码沙盒上创建一个测试沙盒并给我们一个链接吗？