我们都知道开发人员对最流行的 React 库的热爱。它易于学习，并且可以轻松使用 React 构建任何网站的用户界面。如果您正在构建一个应用程序，那么您应该在将其提供给用户之前测试您的应用程序。
如果您是使用 React 库的前端开发人员，您可能有一些最喜欢的工具或框架来测试您的 React 应用程序。许多开发人员使用 Jest、Enzyme 或其他一些流行的工具和库来测试 React 应用程序的组件。然而，每个工具或框架对每个人来说都不尽相同。开源生态系统中有大量测试框架和工具可用于测试 React 应用程序。
无论您是在进行单元测试、集成测试还是端到端测试，选择正确的测试工具集和框架是在 React 中利用 TDD 的关键因素。在这篇博客中，让我们谈谈很多人在日常工作中使用的一些流行的 React 测试框架和库。
1. 开玩笑
Jest 是最受欢迎的测试框架，每周下载量超过1600 万次。它由Facebook创建和维护。该团队使用它来测试所有 JavaScript 代码，包括 React 应用程序。它也被 Airbnb、Uber、Intuit 和其他团队采用。 Jest 带有测试运行程序和断言功能。这个框架也适合想要尝试极快的 JavaScript 代码的初学者。
- 非常快的性能。 Airbnb 从 Mocha 切换到 Jest 后，总测试时间从12 分钟减少到仅 4.5 分钟。
- 它进行快照、并行化和异步方法测试。
- 模拟你的函数，包括第三方 node_module 库
- 可以使用实时快照管理更大对象的测试。
- 带有报告指南的标准语法。
- 兼容 React、VueJS、Angular 和许多项目。
2. 摩卡
Mocha 是另一个流行的 Javascript 开发人员测试框架。它为 NodeJS 程序、异步测试、测试覆盖率报告和任何声明库的使用提供浏览器支持。它提供了对如何测试代码、使用哪些工具的完全控制，同时您可以插入和拔出链中的大多数支持库和工具。 Jest 是流行的框架，但它有一些问题，例如模拟令人困惑，因此在这种情况下 Mocha 是替代选项。
- 在 Node.js 上运行并提供对异步前端和后端测试的支持
- 有助于错误跟踪。
- Mocha 与 Enzyme 和 Chai 的组合在断言、模拟等方面很受欢迎。 Enzyme + Mocha 是测试用 ReactJS 编写的 Web 应用程序的好组合。
3. 柴
Chai 是一个流行的断言和期望库，适用于 node 和浏览器，可以与任何 javascript 测试框架配对。断言是一种声明在测试中期望什么的方式。 Mocha 没有内置断言库，所以很多开发人员选择 Chai 和 Mocha 来测试 React 应用程序。一些功能，如 expect、should 和 assert 可帮助您声明测试中的预期内容。它可用于对函数进行断言，也可用于稍后使用 Enzyme 对组件进行断言。
4. 茉莉花
Jasmine 是一个很棒的 BDD 开源框架和测试运行器，用于测试各种 javascript 应用程序。它包括在具有不同分辨率的多个设备上的用户界面的可见性测试和响应测试。许多 Angular CLI 用户的开发人员喜欢使用 Jasmine 来测试应用程序。开发人员大多将其与 Babel 和 Enzyme 结合起来测试 React 应用程序。您可以阅读 helper util 库，该库专门用于测试 React 应用程序。下面是 jasmine 框架的一些专业方面……
- Jasmine 不需要文档对象模型 (DOM)。
- 在前端和后端测试中都有帮助。
- 异步函数测试。
- 模拟请求。
- 自定义相等检查器断言。
- 自定义匹配器断言。
- 可靠的文档和社区支持。
请记住，Jasmine 不支持快照测试、代码覆盖工具、并行化（需要第三方工具）和原生 DOM 操作（需要第三方工具）。
5.酶
Enzyme 是一个测试实用程序，旨在帮助开发人员轻松测试 React 组件。 Enzyme 是 Airbnb 开发和维护的最常用的框架之一。开发人员将其与 Jest、Chai 或 Mocha 等其他框架结合起来测试 React 应用程序。该酶仅用于渲染组件、访问事物、查找元素、与元素交互以及模拟事件。 Chai 或 Jest 可用于对其进行断言。您可以测试 React 组件的输出，抽象组件的渲染。从 Enzyme 与 Jest 链接阅读有关测试 React 应用程序的更多信息。
- 使用浅渲染。
- 访问组件的业务实现。
- 进行完整的 DOM 渲染。
- 在浅层渲染中使用react-hooks ，但有一些限制。
6. 赛普拉斯 IO
Cypress 是一个非常快速的端到端测试框架，使您无需任何额外的测试框架即可编写测试。它允许您在真实的浏览器或命令行中运行您的测试。除了在真实浏览器中测试您的代码外，您还可以同时使用浏览器开发工具。该框架带有控制面板，可让您控制测试的状态。使用 Cypress 的一些优点和优点是……
- 带快照的时间旅行
- 截图和视频
- 自动等待
- 在不接触服务器的情况下控制网络流量以测试边缘情况
- 内置的并行化和负载平衡使调试更容易。
- 与页面组件交互的好 API。
7. 反应测试库
React-testing-library 由Kent C. Dodds创建，并得到广大开发人员社区的支持。它允许您轻松测试组件并在测试中模拟用户行为。与酶相似，这个库是一套完整的 React DOM 测试实用程序，专注于模仿实际用户操作和工作流程。阅读文章 Revisiting React Testing in 2019 以在 react-testing-library 和 Enzyme 之间做出选择。您可以使用 react-testing-library 执行以下操作…
- 查询 text、label、displayValue、role 和 testId 中的元素
- 触发任何事件
- 等待元素出现并等待
这个库有一些限制，你不能进行浅层渲染，也不能访问组件的内部业务，例如状态。
8. 傀儡师
Puppeteer 不是一个 javascript 框架，它是一个无头的 Chromium 节点库，提供 API 来通过 DevTools 协议控制 Chrome 或 Chromium。您可以启动chrome，并使用提供的API 在页面之间导航、获取按钮并单击它们。 Puppeteer 在实际浏览器上运行，它允许您使用类似于浏览器的 API 编写端到端测试。您可以使用 Puppeteer 做更多事情，例如生成屏幕截图、从 SPA 生成预渲染内容、自动化表单提交、键盘输入等操作。您可以将 Puppeteer 与 Jest 结合起来测试您的 React 应用程序端到端。
- 简单的自动化 UI 测试、表单提交和键盘输入
- 轻松创建网页的屏幕截图和 PDF 文件
- 支持测试 Chrome 扩展。
Puppeteer 不支持大量扩展，但前景光明。
结论
我们可以看到每个测试库和框架都有其优点和缺点。无论是单元测试、集成测试还是端到端测试，选择正确的工具都有助于获得最佳结果。将正确的测试框架（例如 Jest 等）与正确的断言/操作库（例如 Enzyme 等）相结合来测试 React 组件对于创建流畅灵活的工作流程非常重要，该工作流程可以在您升级、扩展和修改代码时进行调整.