Jest 与 Mocha对比 3 大 JavaScript 测试框架

介绍

每个开发人员都知道编写测试很重要，但是说到 JavaScript 测试，有很多框架可供选择。那么，下次启动项目时，您如何知道该选择哪个框架呢？

在本文中，我将比较三个流行的框架—— Mocha、Jest和Jasmine ——以帮助您做出更明智的决定。我将研究这些框架如何处理常见的测试场景，例如模拟函数和异步调用。我将展示如何实现这些测试的示例。我还会简要介绍一些最佳实践以及为什么应该使用测试框架。

三个框架

Mocha、Jest 和 Jasmine 都是热门框架，拥有强大的社区和多年的开发经验。总体而言，Mocha 和 Jasmine 在后端测试方面更胜一筹，因为它们最初是为 Node 应用程序构建的；因此，它们比 Jest 拥有更多的后端工具和文档。对于前端，测试框架的选择通常会受到前端框架的影响。Jasmine 更常与 Angular 配合使用，而 Jest 是由 Facebook 创建的，用于与 React 配合使用。

无论您选择哪一款框架，这三款都是成熟有效的选择。最佳选择最终取决于您的项目需求和个人偏好。为了帮助您确定哪个框架最适合您，让我们来看看一些常见测试场景下每个框架的实际应用。

模拟函数

您在应用程序中最常测试的是函数调用。为函数编写可靠的测试非常重要，因为无论使用哪种测试框架，糟糕的测试都可能触发真正的函数调用，从而导致内存泄漏和浏览器的意外行为。

当测试函数调用时，你的测试应该：

• 关注函数调用的预期结果，而不是函数的实现
• 永远不要改变应用程序的状态
• 使用模拟函数，这样你就不必担心测试中出现意外的副作用

以下是在 Jest、Jasmine 和 Mocha 中模拟前端函数调用的示例。

笑话

如果您使用 React，Jest 不需要太多依赖项（如果有的话）。但是，如果您不想深入研究react-testing-library，Jest 也兼容一些测试专用库，例如​​ Enzyme。此示例使用Enzyme对组件进行浅渲染，点击按钮，然后查看是否打开了模态框。在这里，您需要渲染组件并模拟点击，以查看您的模拟函数调用是否按预期打开了模态框。

Jest 中的模拟函数调用

茉莉花

在所有框架中，Jasmine 更适合 Angular。不过，一旦你为 React 设置好了所有正确的配置和辅助文件，编写测试就不需要太多代码了。

这里你可以看到ReactTestUtils正在取代 Enzyme 或 react-testing-library（展示其他可用工具之一）。ReactTestUtils 使前端与 Jasmine 的协作更加轻松，并保持较少的代码行数。但是，你需要了解 ReactTestUtils API。

Jasmine 中的模拟函数调用

摩卡

Mocha 为您提供了更多灵活性，因为它通常用于前端和后端测试。您需要导入几个库，例如Chai，才能使其与 React 配合使用。虽然 Chai 与 React 没有直接连接，但它是 Mocha 最常用的断言库。安装这些依赖项后，使用起来与使用 Jest 类似。本示例结合使用了 Enzyme 进行渲染，以及 Chai 进行断言。

Mocha 中的模拟函数调用

我的看法

对于模拟函数，这三个库在代码行数和复杂度方面非常相似。我建议直接使用最适合你的技术栈的库：Jest 用于 React，Jasmine 用于 Angular，如果你也在后端使用 Mocha 并且希望保持一致，那么 Mocha 是不错的选择。

模拟数据

后端测试和前端测试一样棘手。处理数据时尤其如此，因为你不希望测试将数据插入到真实的数据库中。如果不小心，这种危险的副作用很容易潜入你的测试套件中。因此，使用模拟数据设置测试数据库是最佳实践。

当您使用模拟数据时，您可以：

• 准确查看错误发生的位置，因为您知道预期的值是什么。
• 检查后端响应的类型并确保响应不会泄露真实数据
• 更快地发现错误

模拟数据发送请求是你经常会遇到的情况，这三个框架都支持此功能。以下是这三个框架如何实现模拟数据的示例。

笑话

在这个 Jest 测试中，最需要注意的是如何检查数据是否已成功传递给 API 或数据库。测试末尾有多个 expect() 匹配器，它们的顺序很重要。你必须明确地告诉 Jest，在发送模拟数据后，你期望得到什么结果。这里使用了supertest库来使用模拟数据发出模拟 post 请求。

在 Jest 后端测试中处理数据

茉莉花

虽然编写良好的后端 Jasmine 测试需要更多代码，但您可以控制数据的创建和重置方式及时间。Jasmine 还内置了工具，可用于在测试的其他部分引用模拟数据。本示例使用请求库来处理模拟发布数据请求。

在 Jasmine 后端测试中处理数据

摩卡

在所有框架中，Mocha 处理模拟数据和请求所需的依赖项最多。您可能需要使用chai-http搭建一个模拟服务器来运行请求，而不是像其他框架那样模拟请求和响应。Mocha 确实有不错的内置工具，但需要更多时间才能上手。使用 Chai 及其相关库是一种常见的做法，如下例所示：

在 Mocha 后端测试中处理数据

我的看法

Mocha 和 Jasmine 最擅长的是后端测试。它们专为测试 Node 应用程序而构建，这一点在其工具中得到了充分体现。它们通过框架自带的选项和功能，为您提供更精细的控制。如果您愿意花时间添加一些可用的库，Jest 仍然是一个不错的选择。

模拟异步调用

众所周知，异步代码容易引发问题，因此测试尤为重要。您不仅需要关注自己代码中的异步行为，而且许多在生产环境中出现的 bug 可能来自意外的异步源，例如第三方服务。编写具有异步行为的测试时，请尽量避免触发实际的函数调用，因为测试的异步调用会与实际代码的执行重叠。

所有测试框架都提供了多种编写异步代码的选项。如果您的代码使用了回调，那么您的测试也可以使用回调。如果可以选择，请考虑使用async/await 模式。它使您的代码更具可读性，并帮助您快速找到测试中断的位置。

Promises也是编写异步测试的一种选择。如果您正在使用不支持 async/await 的旧代码，可以考虑使用 Promises。但是，请确保它们按照您在生产环境中预期的顺序执行。在整个执行过程中检查值有助于发现异常行为。

以下是 JavaScript 测试框架中异步测试的示例。

笑话

虽然使用 Jest 编写后端测试很简单，因为它最初是为 React 开发的，但你可能需要花费一些时间阅读文档并安装第三方库，因为它的大多数工具都是前端专用的。不过，Jest 确实可以处理你需要的任何格式的异步调用，例如回调或 Promises。这种 async/await 调用的工作方式与你在其他 JavaScript 代码中相同。

使用 async/await 进行 Jest 异步调用

茉莉花

Jasmine 最初是为 Node.js 开发的，因此它有很多内置功能。然而，在运行测试之前和之后可能需要进行一些设置。例如，您可以在这里看到，您应该在 beforeAll 方法中处理异步调用，以防止测试后续部分产生残留影响。

Jasmine 使用 async/await 进行异步调用

摩卡

这里你可以看到 done 方法用于处理返回一个 Promise。它使用与上一个 Mocha 示例相同的 chai-http 库。这是 Mocha 测试中常见的异步调用方式。你可以在 Mocha 中使用 Promise 或 async/await 模式。

使用 async/await 进行 Mocha 异步调用

我的看法

对于后端测试，Jasmine 可以轻松处理异步方法，而且开箱即用，是我的首选。Mocha 和 Jest 也很好用，不过需要翻阅更多文档才能找到所需的内容。

模拟渲染组件

另一个重要且常见的测试是确保渲染的组件在预期时间内可用。和之前一样，你通常会看到 Jest 与 React 配合使用，Jasmine 与 Angular 配合使用，但你可以在任何前端库上使用这三个框架中的任何一个。

根据渲染深度，渲染组件可能是一项耗时的任务。一些开发者倾向于使用快照测试，它会保存一个表示 UI 当前状态的文件。另一些人则更喜欢模拟渲染后的组件。快照在查看 UI 变化时更有用，而渲染在查看组件是否按预期工作时更有用。两种方法都很有用。

笑话

正如我之前提到的，Jest 是为 React 构建的，因此您无需导入任何特殊库即可进行渲染测试。这使得这些测试保持轻量级，并节省了依赖项的空间。ReactDOM在许多 React 项目中很常见，并且附带了检查基本渲染所需的方法，如下例所示：

Jest 框架中的 React 渲染测试

茉莉花

设置 Jasmine 进行 React 渲染测试比想象中要难；它涉及大量的初始设置。Angular团队推荐使用Karma和 Jasmine 来测试组件。以下示例用于测试一个 Angular 组件。您必须导入要测试的组件，然后可以使用 Angular 自带的 @angular/core/testing 为组件设置环境，然后再尝试渲染并检查环境是否可用。

Jasmine 框架中的 Angular 渲染测试

摩卡

您通常会看到Enzyme和 Chai 与 Mocha 一起使用进行前端测试，测试 React 渲染也一样。一旦导入了所需的特定方法（例如 shallow 和 expect），您就可以编写类似于其他框架的测试。下面的示例利用了 Enzyme 的浅渲染和 Chai 的断言。

Mocha 框架中的 React 渲染测试

我的看法

渲染组件的最佳实践是仅使用前端库推荐的测试框架。使用自带的工具，您无需处理配置错误。如果可能，请尝试使用浅渲染和快照，以节省测试时间并专注于渲染组件的核心功能。

结论

希望您现在对这三个流行框架之间的区别有了更好的了解。正如我提到的，无论您选择哪个框架，这三个都是成熟有效的选择，并且可以根据您的项目需求和偏好为您服务。现在，您可以开始测试了！