测试库 React 与 Jest

Question

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

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

Answer 1

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

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

render, fireEvent, waitFor, screen

您还可以使用Enzyme（另一个流行的测试库）来实现此类功能来访问 dom 元素

额外：开发人员经常混淆

• 笑话
• 反应测试库
• 酶

这里Enzyme和react-testing-library是两个相似的东西并且彼此替代意味着您可以使用

• 开玩笑或酶
• 用玩笑反应测试库
• 您还可以使用所有三个即react-testing-library+Enzyme 和 jest
• 但如果没有笑话或任何其他测试运行程序，您不能使用酶和反应测试库，例如：Mocha

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

Answer 2

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 与 RTL 一样也不是测试运行程序，因此它可能需要像 Jest 这样的运行程序。

Mocha 是 Jest 的替代品

以下组合是可能的

• React 测试库 + Jest(React's recommended combination, inbuilt into Create-React-App)
• 酶+笑话
• React 测试库 + Mocha
• 酶+摩卡

有哪些不同类型的测试？

• 单元测试

  • 一次测试一个代码单元。可以是单一功能或不依赖于其他单元的组件

• 集成测试

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

• 功能/行为测试

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

  • 功能测试也可以是简单的单元测试。假设单击按钮时，div 变为红色。这可能是一个简单的单元测试，但它仍然可以被视为功能测试，因为它测试“单击是否变红”的特定行为

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

• 验收/端到端 (E2E) 测试

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

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

    • Cypress 仅支持 Javascript，而 Selenium 支持所有流行语言，如 Java、Python、Ruby、C#、Php 等。检查 - Cypress 与 Selenium

  • React-Testing-Library不支持E2E测试

什么是模拟或存根？

让我用一个场景来解释这一点。假设您制作了一个网站来检查不同城市的气候。该应用程序从名为 Weather-API 的外部源获取数据（使用 fetch 或 axios 库）。您可以搜索任何城市，它会为您提供适当的气候条件。

现在我们需要测试这个应用程序。假设我们正在编写一个单元测试来测试具有此功能的函数，其中当城市作为参数传递时，它会调用外部 API（在本例中为天气 API），获取数据，然后您可以编写一个expect语句来测试期望值是否等于获取的值。

如果你仔细观察一下，我们实际上在每次运行单元测试时都会在测试中调用 Wea​​ther-API。这种方法的缺点是：

• 我们正在我们的应用程序中测试外部 API（这不是必需的）
• 如果我们这样做，我们就会浪费我们的 API 调用（在大多数情况下是收费的）
• 我们不需要测试外部 API，因为 Weather-API 开发人员可能已经测试过它，我们需要担心只测试我们的应用程序而不是外部服务

那么这里的解决方案是什么呢？解决方案是模仿外部 API 的响应，并在我们的测试中将其用作实际值，我们可以根据预期值对其进行测试。这称为模拟。我们这样做的原因是我们已经知道外部服务返回给我们什么，我们不必再调用该 API，而只需将这些值硬编码为实际值。

参考：用 Jest 测试 React 和 React 测试 - Bonnie Schulkin

资源：

要了解测试和模拟这些测试，这些是一些很好的免费 YouTube 视频

• JavaScript 测试 - 单元、集成和 e2e - Max, Academind
• JavaScript 测试 - 模拟异步代码 - Max, Academind
• React 测试库速成课程 - Laith Academy
• Stackoverflow - 什么是嘲笑

为了更深入地了解，这些是一些付费的udemy课程

• React 测试库训练营 - Laith Harb
• 使用 Jest 测试 React 和 React 测试 - Bonnie Schulkin

Answer 3

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 频道上跟进有关问题和讨论的更多信息。