在前端开发中，UI 测试是不可避免的一环。为了确保我们的代码在各种情况下能正常运行，我们需要对其进行测试。而对于 React 项目而言，Jest 和 Enzyme 是两个常用的测试工具。本文将介绍如何在 React 项目中使用 Jest 和 Enzyme 进行 UI 测试。
Jest 简介
Jest 是 Facebook 推出的一个基于 Jasmine 的 JavaScript 测试框架。与其他测试框架相比，Jest 有以下特点：
- 快速：使用自动化并行测试执行，能提高测试性能。
- 易用：自带断言库、测试覆盖率报告和模拟模块。
- 配置灵活：可自定义配置和扩展。
Enzyme 简介
Enzyme 是 Airbnb 推出的 React 测试工具，它提供了一套简化了的 API 用于测试 React 组件的输出。与其他 React 测试工具相比，Enzyme 有以下特点：
- 灵活性高：能够对 React 组件的渲染结果进行深入的断言、交互和遍历。
- 轻量：Enzyme 本身很小且易于维护。
- 易用性高：使用它的 API 可以轻松构建测试。
安装 Jest 和 Enzyme
首先，我们需要安装 Jest 和 Enzyme。我们可以使用 npm 安装它们：
$ npm install --save-dev jest enzyme enzyme-adapter-react-16
Jest 和 Enzyme 需要通过适配器来配合使用，目前 Enzyme 支持的 React 版本是 16.x 版本和以上，我们需要安装 enzyme-adapter-react-16 适配器。
准备测试用例
我们已经安装好了 Jest 和 Enzyme，接下来，我们需要准备测试用例。测试用例的编写一般包括测试计划、测试数据、测试环境以及测试代码等几个部分。对于 React 项目而言，测试计划是最重要的一环。
举个例子，假设我们有如下的 TodoList 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- ----- -- -- -
------ -
----
----------------- -- --- --------------------------------
-----
--
--
------ ------- ---------它接收一个 todos 属性，将其变成一个包含待办事项的无序列表。我们可以为它编写一个测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ -------- ---- -------------
-------------------- -- -- -
----- ----- - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
--
----------- --- ----- ------- -- -- -
----- ------- - ----------------- ------------- ----
------------------------------------------
-----------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
-----------------------------------------------------------------
---
---我们将 TodoList 组件渲染出来，然后断言它的 ul 元素以及 li 元素的个数，以及每个 li 元素的文本内容是否与给定的待办事项匹配。
运行测试用例
测试用例准备好了，接下来我们可以运行它。在 package.json 文件中可以添加命令来运行测试：
{
"scripts": {
"test": "jest"
}
}然后，在终端中运行 npm test 命令，即可运行测试用例。
$ npm test
如果测试用例运行成功，你将会看到如下的输出信息：
-- -------------------- ---- -------
---- ------------------
--------
- ------- --- ----- ----- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ------
--- --- ---- -------这表明我们的测试用例已经通过了。
总结
在本文中，我们介绍了如何在 React 项目中使用 Jest 和 Enzyme 进行 UI 测试。我们学习了 Jest 和 Enzyme 的简介、安装过程、编写测试用例以及运行测试用例等相关内容。现在，我们可以开始编写我们自己的测试用例了。UI 测试可以帮助我们发现 UI 的问题，以及增强我们代码的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f9b2795b1f8cacd724be5