在前端开发中，测试是一个非常重要的环节。通过测试可以帮助我们尽早发现问题，保证代码质量，提高开发效率。本文将介绍如何使用 Jest + react-testing-library 来测试 React 组件。
Jest 简介
Jest 是 Facebook 发布的一个 JavaScript 测试框架。它支持自动化测试、快速反馈和代码覆盖率报告等功能。Jest 内置了断言、Mock、Spy 等测试工具，使得我们可以方便地编写测试用例。
react-testing-library 简介
react-testing-library 是一个专门为 React 开发的测试工具库。它提供了一组基于 DOM 的 API，可以帮助我们测试 React 组件的行为和状态。相比于 Enzyme 这样的工具，react-testing-library 更注重测试用户界面的行为而不是实现细节。
安装 Jest 和 react-testing-library
我们先来安装 Jest 和 react-testing-library：
npm install --save-dev jest @testing-library/react
其中，jest 是 Jest 框架，@testing-library/react 是 react-testing-library 工具库。
编写测试用例
在编写测试用例之前，我们需要先了解一下 react-testing-library 的 API。该库中最常用的 API 有以下几种：
render 用于渲染组件，并返回一个测试工具对象，该对象包含了一些获取组件元素和节点的方法。
getBy、queryBy、findBy 根据选择器获取组件元素，这三个方法的区别在于当元素不存在时的返回值，分别是直接抛出错误、返回 null、返回 promise。
fireEvent 用于模拟用户交互事件，如点击、输入、提交等操作。
waitFor 用于等待某个条件满足，例如等待某个元素出现或消失。
下面我们来编写一个测试用例，测试一个简单的登录表单组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ---------- ------- - ---- ------------------------- ------ --------- ---- -------------- ------------- ----- ------ ----- -- -- - ----- - --------------- --------- - - ----------------- ---- ----- ---------- - ------------------------ ----- ------------- - --------------------------- ----- ------------ - -------------------- ---------------------------- - ------- - ------ --------------- - --- ------------------------------- - ------- - ------ ---------- - --- ------------------------------ ----- ---------- -- ---------------------- ---展开代码
以上测试用例通过 render 方法渲染 LoginForm 组件，并获取其元素，然后使用 fireEvent 模拟用户输入和点击操作。最后使用 waitFor 方法等待 Welcome 文本出现。
Mock
当我们测试一个组件时，有时需要使用 Mock 来代替某些组件或函数。例如，假设我们有一个需要发送事件数据的组件：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ------- -------- ----------- -------- -- - ----- ------ -------- - ------------- ----- ------ -------- - ------------- ----- ------------ - ------- -- - ----------------------- ---------- ----- ---- --- -- ------ - ----- ------------------------ ------ ----------- ------------ ----------------- -- ---------------------------- -- ------ ----------- ------------ ----------------- -- ---------------------------- -- ------- ----------------------------- ------- -- -展开代码
我们可以通过 Mock 来测试是否正确处理了 onSubmit 回调函数的调用：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ --------- ---- -------------- ------------- ----- ------ -- -- - ----- ------------ - ---------- ----- - --------------- --------- - - ----------------- ----------------------- ---- ----- --------- - ----------------------- ----- --------- - ----------------------- ----- ------------ - -------------------- --------------------------- - ------- - ------ ----- ------ - --- --------------------------- - ------- - ------ ------------ - --- ------------------------------ ------------------------------------------------ ----- ------- ----- --------------- ---展开代码
以上测试用例通过 jest.fn() 创建 Mock 函数，并传递给 EventForm 组件，用于测试是否正确调用了 onSubmit 回调函数。
覆盖率报告
最后，我们来演示一下如何生成测试覆盖率报告。我们可以在 package.json 中配置 test 命令：
{ "scripts": { "test": "jest --coverage" } }
然后运行 npm test 命令即可。Jest 会在控制台中输出测试结果以及覆盖率信息，还会在 coverate 目录下生成一个 HTML 报告文件。该文件中提供了每个文件和每个函数的测试覆盖率信息，对于开发人员来说是非常有用的参考。
总结
使用 Jest 和 react-testing-library 可以帮助我们轻松地编写测试用例，测试 React 组件的行为和状态。我们可以使用 Mock 对组件或函数进行模拟，并使用覆盖率报告来评估测试覆盖范围。在开发中，越早测试越好，这样可以避免后期不必要的麻烦和浪费。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493aebb48841e989414b4f1
