测试库 React 与 Jest

Posted 2023-02-22

【中文标题】测试库 React 与 Jest

【英文标题】：Testing Library React vs Jest

【发布时间】：2021-05-26 05:09:58

【问题描述】：

我有一个非常大的 react 应用程序（很多页面、模式、表格等），我正在使用 redux-saga 来管理状态。我有很多商店，几乎在所有组件中，我都使用 useSelector 方法从商店中获取数据，并且由于逻辑原因，其中有许多钩子。

我想开始测试应用程序，特别是避免应用程序在数据未定义、无效等情况下崩溃。您建议我在这种情况下应用什么库？

【参考方案1】：

React 测试库不是 Jest 的替代品，因为它们彼此需要，而且每个人都有明确的任务。

Jest 是一个测试运行程序，它使您能够从命令行使用 Jest 运行测试。此外，Jest 还为您提供测试套件、测试用例和断言的功能。 与 Jest 相比，React 测试库是测试 React 组件的测试库之一。

如果你使用 create-react-app，Jest（和 React 测试库）会默认安装。如果您使用的是自定义 React 设置，则需要自己安装和设置 Jest（和 React 测试库）。

您可能想了解更多信息：https://jestjs.io/docs/en/tutorial-react 和 https://testing-library.com/docs/react-testing-library/intro/。您也可以在库的 github 频道上跟进更多关于问题和讨论的信息。

【参考方案2】：

React 测试库 和 Jest 都有不同的职责“react 测试库”不是测试运行器，意思是当你输入命令 npm test 或 npm run test 开玩笑的责任收集所有以 .test.js 结尾的文件并运行每个测试用例并在控制台中显示通过和失败结果，如下所示

react 测试库为您提供捕获 dom 元素并执行某些操作的功能，下面是它的一些功能

render, fireEvent, waitFor, screen

你也可以使用 Enzyme（另一个流行的测试库）来实现这样的功能来访问 dom 元素

EXTRA：开发者经常混淆

开玩笑 反应测试库 酶

这里 Enzyme 和 react-testing-library 是两个相似的东西，并且可以相互替代使用

酶与玩笑或 react-testing-library with jest 您也可以使用全部三个，即 react-testing-library+Enzyme 和 jest 但你不能在没有 jest 或任何其他测试运行器的情况下使用 Enzyme 和 react-testing-library，例如：Mocha

其中 jest(testing-framework) 将收集所有 .test.js 文件执行所有测试用例并将输出放在控制台中，其中包含通过和失败的详细信息以及 react-testing-library 或酶（两者都是测试库） ) 将帮助您执行事件和访问 dom 元素

【讨论】：

这正是我想要的。感谢您的出色回答。您消除了我对 Enzyme、Jest 和 React-Testing-Library 之间差异的疑虑 :-)

【参考方案3】：

React 开发人员的常见问题/困惑

什么是 React 测试库？

为测试提供虚拟 DOM - 任何时候我们在没有浏览器的情况下运行测试时，我们都需要一个虚拟 DOM，这样我们就可以执行点击元素之类的操作，并且我们可以查看虚拟 DOM 的行为是否符合其应有的行为（例如更改颜色按钮单击上的 div 等等）。

Jest 与 React 测试库有什么关系？

Jest 是一个 javascript 测试库（不仅适用于 React，也适用于任何 JS 相关的框架或库）。Jest 是一个

测试运行器

，负责 发现测试 运行测试 确定测试是通过还是失败

React 测试库和 Jest 协同工作

（请看下图了解这一点

Create-React-App

默认带有 React-Testing-Library，其中还包含 Jest，因此您无需安装其他任何东西

什么是酶和摩卡？

Enzyme（由 Airbnb 开发）是 React-Testing-Library（但不是 Jest）的替代品。 请记住，从上面的屏幕截图中，React-Testing-Library 用于提供虚拟 DOM。 Enzyme 将在某些变体中完成类似的事情。 Enzyme 和 RTL 一样也不是 Test Runner，所以它可能需要像 Jest 这样的 runner。

Mocha 是 Jest 的替代品。

以下组合是可能的

React 测试库 + Jest 酶+玩笑 React 测试库 + Mocha 酶+摩卡

有哪些不同类型的测试？

单元测试

一次测试一个代码单元。可以是单个函数，也可以是一个组件，不依赖于其他单元

集成测试

测试多个单元如何协同工作。测试不同功能/单元/组件之间的交互

功能/行为测试

功能测试是指测试功能/软件的行为。我们可能正在测试软件是否对特定的数据集做正确的事情。这可能是一个集成测试，因为它可能必须与不同的单元交互。所以功能测试也可以是集成测试

功能测试也可以是简单的单元测试。假设单击按钮，div 变为红色。这可能是一个简单的单元测试，但它仍然可以被视为功能测试，因为它测试 CLICK TURNS RED OR NOT 的特定行为

所以，功能测试意味着，不是测试代码，而是测试行为。 React-Testing-Library 鼓励功能测试

验收/端到端（E2E）测试

这是一个端到端的测试，我们需要浏览器，也可能需要服务器

E2E 测试的流行工具是 Cypress 和 Selenium

React-Testing-Library 不支持 E2E 测试

参考：https://www.udemy.com/course/react-testing-library/

【参考方案4】：

开玩笑

“Jest 是一个令人愉快的 JavaScript 测试框架，专注于 简单。它适用于使用以下项目的项目：Babel、TypeScript、Node、 React、Angular、Vue 等等！”

源代码：jest

TLDR：Jest 允许您快速测试上述任何内容，而无需太多样板。作为一个框架，框架的代码调用你的测试代码。 Jest 查找对代码所做的更改以运行特定的测试用例等。您可以仅使用 Jest (react documentation) 为 React 编写测试

反应测试库

“React 测试库是一个用于测试 React 组件的非常轻量级的解决方案。它在 react-dom 和 react-dom/test-utils 之上提供了轻量级的实用功能，以鼓励更好的测试实践”。 源：RTL

TLDR：它是一个库（即，您调用代码）。它在仅使用 Jest 和默认的 react-dom/jest-utils 的基础上提供了一些实用程序，可帮助我们快速编写测试，使用更少的样板（使用多个 act() 调用等）并更接近实际使用（可访问性）

将 RTL 与模拟服务器工作线程结合使用，让大型项目的工作更轻松。