为 React 开发人员推荐 8 个测试工具、库和框架

很多开发人员都很喜欢 react，在前端领域它也是很流行的 UI 库了。我们也知道应用要交付生产环境前是必须要经过完善的测试的，而测试应用程序时，有趁手的工具能极大减轻开发人员的负担、提升测试效率并减少测试漏洞。正所谓"工欲善其事，必先利其器"，这篇文章就为大家推荐 8 个好用的测试工具、库和框架。本文编译自 GeeksforGeeks 网站。

如果你是前端工程师，日常工作中经常会用到 React 库，那么你手里可能已经有一些用来测试 React 应用的工具或框架了。许多开发人员会使用 Jest、Enzyme 或其他一些流行的工具和库来测试 React 应用组件。但毕竟萝卜青菜各有所爱，开源生态系统中又有大量用于 React 应用的测试框架和工具，所以很多人（尤其是新人）很容易在这个问题上犯选择困难症。下面我们会介绍一些流行好用的 React 测试框架和库，供大家参考。

1. Jest

Jest 是最受欢迎的测试框架，每周下载超过 1600 万次。它是由 Facebook 创建和维护的。FB 团队用它来测试所有 JavaScript 代码，也包括 React 应用程序。Airbnb、Uber、Intuit 等公司的团队也在用它。Jest 附带了测试运行器和断言功能。就算是刚刚接触 JS 编程的新手，也可以用 Jest 来测试自己的作品。

特点：

速度够快。从 Mocha 切换到 Jest 后，Airbnb 的总测试运行时间从 12 分钟减到了 4 分半。
它可以执行快照、并行化和异步方法测试。
可以用它 mock 你的函数，包括第三方的 node_module 库
可以使用快照来管理具有较大对象的测试。
带有报告指南的标准语法。
与 React、vueJS、angular 等许多项目兼容。

2. Mocha

Mocha 是另一个针对 JavaScript 开发人员的流行测试框架。它为 NodeJS 程序、异步测试、测试覆盖报告以及许多库提供了浏览器支持。使用 Mocha 时，你可以完全掌控代码的测试方法与工具选项，还可以随意加入或抽出工具链中的多数库和工具。Jest 有一些缺点，比如说 mocking 就有些难懂，那么这时候 Mocha 就是一个不错的替代方案。

特点：

运行在 Node.js 上，并支持异步前端和后端测试。
错误跟踪。
人们经常使用 Mocha 与 Enzyme 和 Chai 的组合处理断言和 mocking 等。推荐使用 Enzyme+Mocha 的组合测试用 ReactJS 编写的 Web 应用程序。

3. Chai

Chai 是针对 node 和浏览器的流行断言和期望库，可以与任何 JavaScript 测试框架搭配。断言是一种声明测试期望的方法。Mocha 没有内置的断言库，因此许多开发人员选择 Chai 和 Mocha 来测试 React 应用程序。它的某些功能，例如 expect、should 和断言，可以帮助你声明测试中的期望。它可以用来对函数下断言。

4. Jasmine

Jasmine 是一个很棒的 BDD 开源框架和测试运行器，可用于测试各种 JavaScript 应用程序。它包括了可视测试和响应测试，可以用来测试分辨率各异的多种设备。许多使用 Angular CLI 的开发人员都喜欢使用 Jasmine 来测试应用程序。开发人员通常将其与 babel 和 Enzyme 结合起来测试 React 应用程序。

特点：

Jasmine 不需要文档对象模型（dom）。
前端和后端测试。
异步函数测试。
Mocking 请求。
自定义相等性 checker 断言。
自定义 matcher 声明。
可靠的文档和社区支持。

不过，Jasmine 不支持快照测试、代码覆盖工具、并行化（需要第三方工具）和原生 DOM 操作（需要第三方工具）。

5. Enzyme

Enzyme 是一个测试工具，可以帮助开发人员轻松测试 React 组件。它是由 Airbnb 开发和维护的，也是前端领域最常用的框架之一。开发人员喜欢将它与其他框架（如 Jest、Chai 或 Mocha）搭配起来测试 React 应用程序。它只能用于渲染组件、访问事物、查找元素、与元素交互以及模拟事件。可以使用 Chai 或 Jest 为其断言。你可以用它测试 React 组件的输出，抽象化组件的渲染。

特点：

使用 shallow 渲染（浅渲染）。
访问组件的业务实现。
进行完整的 DOM 渲染。
在 shallow 渲染中使用 react-hook，但这里有一些限制。

6. Cypress IO

Cypress 是一个非常快速的端到端测试框架，你无需其他任何测试框架就可以编写测试。它允许你在真实的浏览器或命令行中运行测试。此外你还可以同时使用浏览器开发工具。该框架带有控制面板，可让你控制测试状态。

特点：

带快照的时间旅行功能（time travel）。
屏幕截图和视频。
自动等待。
控制网络流量，而无需接触服务器来测试极端情况。
内置的并行化和负载平衡功能简化了调试工作。
不错的 api，可以同页面组件交互。

7. React-testing-library

React-testing-library 由 KentC.Dodds 创建，得到了广大开发人员的支持。你可以用它轻松测试组件并在测试中模拟用户行为。这个库是一套完整的 React DOM 测试工具，主要用来模仿实际的用户操作和工作流程。

特点：

查询文本、标签、displayValue、角色和 testId 中的元素。
触发任何事件。
使用 wait 等待元素出现。

这个库也有一些局限，你不能进行 shallow 渲染，也不能访问组件的内部业务，例如状态。

8. Puppeteer

Puppeteer 不是一个 JavaScript 框架，它是一个 Chromium Node 库，提供了 API 以通过 DevTools 协议控制 Chrome 或 Chromium。你可以启动 Chrome，然后使用它提供的 API 在页面之间导航、获取按钮并点击它们。Puppeteer 运行在真实的浏览器上，你可以用类似浏览器的 API 编写端到端测试。Puppeteer 的功能很多，例如生成屏幕截图、从 SPA 生成预渲染的内容、自动执行表单提交和键盘输入之类的动作等。你可以将 Puppeteer 与 Jest 搭配使用，对你的 React 应用程序执行端到端测试。

特点：

简单的自动化 UI 测试、表单提交和键盘输入。
轻松创建网页的屏幕截图和 PDF 文件。
支持测试 Chrome 扩展程序。

Puppeteer 不支持那么多扩展，但它的未来充满光明。

小结

每个测试库和框架都有其优点和缺点。无论是单元测试、集成测试还是端到端测试，选择合适的工具才能获得最好的结果。希望本文推荐的这些工具可以帮到大家，你还有哪些工具可以推荐呢？请在评论中分享吧。

原文 https://www.infoq.cn/article/AtB2saQ6eodMr06tYaf7

链接: https://fly63.com/article/detial/9519