在前端开发中，测试是一个非常重要的环节。通过测试可以帮助我们尽早发现问题，保证代码质量，提高开发效率。本文将介绍如何使用 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：
--- ------- ---------- ---- ----------------------
其中，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 命令：
-
---------- -
------- ----- -----------
-
-然后运行 npm test 命令即可。Jest 会在控制台中输出测试结果以及覆盖率信息，还会在 coverate 目录下生成一个 HTML 报告文件。该文件中提供了每个文件和每个函数的测试覆盖率信息，对于开发人员来说是非常有用的参考。
总结
使用 Jest 和 react-testing-library 可以帮助我们轻松地编写测试用例，测试 React 组件的行为和状态。我们可以使用 Mock 对组件或函数进行模拟，并使用覆盖率报告来评估测试覆盖范围。在开发中，越早测试越好，这样可以避免后期不必要的麻烦和浪费。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6493aebb48841e989414b4f1