React 是当下最流行的前端开发框架之一，但是开发一个 React 应用并不是只局限于编写代码。在开发过程中还需要进行单元测试，以确保代码的可靠性和稳定性，并减少潜在的错误。
在本文中，将会介绍如何使用 Jest 和 Enzyme 这两个测试框架进行 React 单元测试。涵盖了以下内容：
- Jest 和 Enzyme 的简介
- 配置 Jest 和 Enzyme
- 编写既简单又实用的测试用例
Jest 和 Enzyme 的简介
Jest 是 Facebook 开发的一个测试框架，具有自己的测试运行器、断言库和内置的 Mock/Stub 功能。它的出现振奋了测试界，提高了测试的可靠性和效率。
Enzyme 则是 Airbnb 开发的一个流行的 React 测试实用工具，提供了一组简单的 API 用于遍历和操作 React 组件。它允许我们通过简单的操作和断言来模拟应用程序的输出，确保代码的正确性，从而提高开发效率。
配置 Jest 和 Enzyme
配置 Jest 和 Enzyme 需要进行以下步骤：
步骤 1：安装 Jest 和 Enzyme
在项目目录下运行以下命令：
--- ------- ---- ------ ----------------------- ------------------- ----------
Jest 会安装到 devDependencies 中，而 Enzyme 及相关的工具会安装到 devDependencies 中。还需要安装 enzyme-adapter-react-16 以适配 React 16。
步骤 2：配置 Enzyme
在项目的 src/setupTests.js 文件中添加以下内容：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
这里的作用是告诉 Enzyme 使用 React 16 适配器。
步骤 3：配置 Jest
打开项目的 package.json 文件，然后添加以下 jest 字段：
------- -
--------------------- -
-----------------------------
--
------------------- -
--------------------------- --------------------
-
-将 setupTests.js 文件添加到 setupFilesAfterEnv 字段中，表明在运行测试之前需要运行该文件。同时这个例子还配置了将 css 等资源进行 Mock。
配置好以上内容之后，开始撰写测试用例。
编写测试用例
为了让读者更好地理解单元测试的编写方式，将会接下来演示一个简单的组件测试，你只需要根据需要编写对应的测试用例即可。
在此之前，我们要先定义一个要测试的组件。让我们看看下面的代码：
------ ----- ---- --------
----- ------ ------- --------------- -
------------------ -
-------------
-
------------- -
---------------------
-
-------- -
------ -
------- ------------------------------------- -------------------
---------------------
---------
--
-
-
------ ------- -------在这个例子中，Button 组件通过 props 接收一个 onClick 事件，当点击时，调用 handleClick 方法传递给 onClick 属性。
接下来是测试用例的编写，我们想要测试这个 Button，以确保它渲染正确并且单击事件能够正确处理。
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----- ------- - --------------------- ---------------
----------- ------- ---------- -- -- -
------------------------------
---
---------- ------ - -------- -- -- -
----------------------------------------------
---
---------- ------ --- ----- --------- -- -- -
----- ----------- - ----------
------------------ -------- ----------- ---
-----------------------------------------
----------------------------------------------
---
---在这个例子中，我们使用了 Jest 和 Enzyme 中的一些 API，大致分为 3 个部分：
- 通过 Jest 的
describe函数创建一个测试套件； - 在测试套件中，使用 Enzyme 的
shallow函数创建组件的一个浅层渲染实例； - 通过 Jest 的
it函数编写具体的测试用例，使用 Enzyme 的 API 对组件进行单元测试。
以上步骤完成之后，运行以下命令：
--- --- ----
如果测试通过，输出应为：
---- ------------------
------
- ------- ------- -------- -----
- ------ ------ - ------
- ------ ------ --- ----- ------- -----至此，演示结束。
总结
单元测试是 React 开发中不可缺少的一部分，它可以提高你的代码质量和稳定性。在本文中，我们介绍了 Jest 和 Enzyme 这两个测试框架的基本使用，以及如何进行配置并编写测试用例，希望你已经掌握了基本的测试技巧，能够写出可靠的测试用例，提高你的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64515376675af4061b53c760