Unit testing Vue测试utils模拟从另一个组件获取响应

我正在尝试使用

vue test utils

和

jest

在一些vue组件上设置单元测试，这些组件从另一个负责使用

fetch（）

调用远程API的vue组件（ApiCalls.vue）检索响应。 进行API调用的组件返回此类型的对象：

{
状态：，
正文：
}

待测试组件概述（

MyComponent.vue

）：

从“./ApiCalls.vue”导入ApiCalls；
导出默认值{
数据（）{
返回{
resultsFromAPI:null
}
},
安装的（）{
这是getSomeData（）；
},
方法：{
异步getSomeData（）{
const APIResponse=wait ApiCalls.data（）.getSomeData（）；
如果（APIResponse.status==200）{
this.resultsFromAPI=APIResponse.body；
}
}
}
}

测试规范概述：

从'@vue/test-utils'导入{shallowMount}；
从“/MyComponent.vue”导入MyComponent；
const wrapper=shallowMount（MyComponent）；
测试（'从API检查数据'，（）=>{
expect（wrapper.vm.resultsFromAPI.toBe（）；
});

我试图模拟函数

getSomeData

，如下所示：

wrapper.vm.getSomeData=jest.fn（（）=>
承诺，决心({
json:（）=>Promise.resolve（{status:200，body:{result:'blablabla'}），
})
);

或

const getSomeData=jest.fn（（）=>
承诺，决心({
json:（）=>Promise.resolve（{status:200，body:{result:'blablabla'}），
})
);

但它不起作用，我在vue测试utils或jest配置中找不到任何线索。。。

---

任何帮助都将不胜感激。

首先，你不应该在Vue构造函数上调用

data（）

函数。我的意思是，你可以这样做只是为了好玩，但你已经知道它会返回什么，对吧？这不是什么秘密。“魔法”构造函数是否在返回的Vue实例上为

data（）

的结果的每个成员创建反应性属性，该值不是

未定义的

现在，让我们来看看模拟尝试的真正问题：您似乎误解了模拟的目的，因此也误解了单元测试的目的。模拟是替换外部系统（到您的组件）因为你只应该测试当前的单元（组件），而不应该测试其他任何东西。你的测试不应该取决于运行测试的机器是否有权访问API，如果API当前关闭，等等

但是永远不要模仿正在测试的组件的内容！

如果这样做，则在测试仍然通过时，您的测试组件可能会被破坏，因为破坏的方法在测试中被替换为实体模拟。您需要一个在方法中运行实际代码的测试，该测试在组件失败时失败，当组件按预期运行时通过

您应该测试组件是否为所有可能的输入生成预期的输出

在您的情况下，您应该模拟

apicall

，使某些东西的行为与您期望的

apicall

一样，并且基本上有两件事情需要测试：

• ApiCalls.getSomeData

  在当前组件已装入（并且使用正确的参数调用）时被调用一次（不少于，不多于）
• 当响应状态为

  200

  时，组件的

  .resultsFromAPI

  将填充返回的数据，否则将保持

  null

您的组件不应该关心什么是

ApiCalls

。换句话说，

ApiCalls

应该是可模拟的。它可以是实际调用后端或后端模拟的东西。重要的是您的组件如何响应来自

ApiCalls

方法返回的不同响应

最后一件你可以测试的事情是当

ApiCalls

不可用时会发生什么，如果你认为这是一种实际的可能性（或者如果它永远不会解决会发生什么-它会暂停）。这些都是边缘情况，通常不包括在内，除非客户端有特定的请求，否则应用程序应该从结构错误中恢复（这是一个罕见的案例）

---

总之，永远不要编写一个在实际组件损坏时可以通过的测试。这是一个可能让你当场被解雇的东西（这是一个比喻——用失败时可能失去的东西替换掉：客户、客户、生命、账户、声誉等等），如果有什么重要的事情实际上取决于您的组件是否按预期执行。因为您编写的测试不仅未能捕获错误，而且实际上还谎称已经测试了组件（它从来没有这样做过-它测试组件模拟）。因此，它给人一种虚假和危险的安全感

---

使用为模拟

apicall

”方法描述的方法

注：平心而论，我可以将您的问题标记为上述问题和其他许多问题的副本。这是以前提出过的问题。
然而，我选择发布这个冗长的警告作为回答（希望您和其他人会发现它有用），并概述不嘲笑应该嘲笑的内容和不正确测试的危险，因为我认为UTs的编写方式是一个大问题。

---

这类错误（及其危险性）的部分责任还有一个原因是UTs现在是强制性的，而很少有编码公司在教授测试原则上下功夫。

@Joules，即使组件中的方法是

async

，您也不应该在测试中模拟该方法。您应该只模拟外部内容，并检查组件是否发送（到模拟）它应该发送什么，并正确处理响应。为了更好地理解原因：如果您意外地在y中键入了某个内容，您希望测试失败