环球资讯：@testing-library/react: 测试你的 React 组件

2023-06-26 21:38:13 出处：哔哩哔哩

@testing-library 是一系列建立在 DOM Testing Library（@testing-library/dom）基础上的包的集合。用来测试 UI 组件，不鼓励测试实现细节（比如组件内部状态、方法甚至声明周期），而是鼓励从用户使用的角度进行测试。

作为初级教程，篇幅有效，本文只讨论 @testing-library/react 的使用，有其他需求的同学，可以查阅对应框架的使用文档。

官网地址：/docs/react-testing-library/intro

(资料图片仅供参考)

repo 地址：/testing-library/react-testing-library

@testing-library/react

React Testing Library 在 DOM Testing Library 的基础上构建，通过添加用于处理 React 组件的 API 来增强功能。

为了避免测试组件实现细节，而是专注于以组件使用的方式进行测试，从而方便理解与对组件重构（实现方式变化但功能不变）。@testing-library/react基于 react-dom和 react-dom/test-utils提供了一些轻量级的工具函数。

另外，@testing-library/react视 Jest 为一等公民，所以默认跟 Jest 配合很好。不过也能自定义使用其他测试框架。

项目准备

Create React App 对 React Testing Library 提供了开箱支持，不过由于各种原因，React 官方文档已不再提及，所以我们使用来整合 @testing-library/react。

从 12 开始已经内置了 Jest 支持，配置起来非常简单。首先安装依赖：

jest-environment-jsdom：Jest 的默认环境是环境。如果正在构建 Web 应用程序，可以使用 jsdom 来代替浏览器类似的环境。要开始使用 JSDOM 测试环境，如果尚未安装，则必须安装 jest-environment-jsdom 软件包

@testing-library/jest-dom：提供了一组自定义的 jest 匹配器，你可以使用它们来扩展 jest。比如：.toBeInTheDocument()。

方便起见，只需在测试设置文件（tests setup file）中导入@testing-library/jest-dom，你就可以开始使用了：

在你的项目根目录下创建一个文件，并添加以下内容：

在幕后，next/jest会自动为你配置 Jest，包括：

使用 SWC 设置 transform

自动 Mock 样式表（.css、.及其 scss 变体）、图像导入和 next/font

将 .env（及所有变体）加载到中

从测试解析（test resolving）和 transforms 中忽略 node_modules

从测试解析中忽略 .next

加载，寻找启用 SWC transforms 的标志

创建测试文件

向文件中添加 `test`脚本

创建第一个测试文件

你的项目现在已准备好运行测试。按照 Jest 的惯例，在项目根目录下添加 __tests__文件夹以进行测试。

例如，我们可以添加一个测试来检查 <Home />组件是否成功渲染标题：

可选地，添加一个快照测试来跟踪您的 <Home />组件中的任何意外更改：

执行测试

运行 npm run test来执行测试套件。在你的测试通过或失败后，你会注意到一系列交互式 Jest 命令列表，这些命令将有助于你添加更多的测试。

其他案例

案例一：`render`/`userEvent`/`screen`

完整代码看这里 /docs/react-testing-library/example-intro/#full-example。

案例二：`render`

案例三：`renderHook`

注意：@testing-library/react 才增加 renderHookAPI 的支持，而且还限定在 React18。如果你的项目使用 React17-，那么最高只能安装版本，测试 React Hook 的话，需要借助 @testing-library/react-hooks库的帮助。

完整 API 及其他资源

完整 API

由于 @testing-library/react是基于 @testing-library/dom的封装，re-export 了 @testing-library/domAPI。因此完整 API 要同时参考 @testing-library/react 的拓展 API（render，renderHook等）和 @testing-library/dom API。