jestjs - 如何模拟慢速网络连接？

Question

我们正在使用 Jest/Enzyme 进行我们的 React 集成测试。我们有一个组件在等待 iframe 加载时显示微调器。当此页面在真实世界的浏览器环境中加载时，微调器会明显显示。但是，在测试 中，微调器没有显示，因为iframe 内容是模拟 并且它们出现得太快以至于微调器没有时间显示。有没有一种方法可以限制环境，以便我们可以根据不同的实际网络速度看到正确的行为？

Answer 1

对于 jest 场景的单元测试来说，这似乎有点复杂。如果你的 React 组件出现在两种不同的状态——加载微调器(状态 1)和加载你呈现的内容(状态 2)——那么我会设置你的单元测试来单独测试这两种状态，而不用担心模拟网络速度/从一种状态到另一种状态的转换。

但是，如果您真的想模拟这样的东西，那么您确实有一个选择。

假设您的组件中有一个属性 isLoaded，当 false 时表示您的加载状态已呈现。您可以按照在加载状态下呈现组件的方式开始(即，将 isLoaded 属性设置为 false 或组件中的任何后续属性) 并进行加载状态测试。

完成这些后，您可以执行以下操作:

wrapper.setProps({ isLoaded: true });
wrapper.update();

这将更新您的属性并强制重新渲染，之后您应该能够进行加载状态测试。

我仍然建议您在两种状态之间尽可能保持两组测试独立，但如果您仍然希望按顺序从一种状态过渡到另一种状态，这对您来说是一个潜在的选择。

单元测试旨在快速并专注于您的代码和组件的行为:而不是模拟现实世界的网络问题或等待事件发生。一旦您的加载状态被单独测试并且您的加载状态也被单独测试，您已经证明这两种状态在被调用时都按预期工作。

从单元测试的角度来看，这就是您所需要的。