React 是一个非常受欢迎的前端框架，通过组件化的方式让我们能够更加方便地开发 Web 应用。但是，随着应用逐渐复杂，为了保证应用的质量，我们需要对组件的 UI 进行测试。本篇文章将介绍如何使用 Enzyme 和 Jest 来进行 React 组件 UI 测试。
Enzyme 是一个 React 测试工具，它提供了一组 API，使得我们能够更加方便地对组件进行测试。它支持多种渲染方式，包括静态渲染、shallow 渲染和完全 DOM 渲染，并且提供了许多实用的断言和辅助函数，可以大大简化我们的测试代码。
Jest 是一个 JavaScript 的测试框架，它可以运行在 Node.js 环境中，并且集成了断言库、测试运行器和覆盖率报告，可以帮助我们更加方便地编写和运行测试。与 Enzyme 相结合，可以让我们在开发 React 组件时更加轻松地进行测试。
接下来，让我们来看一个实际的例子。
安装 Enzyme 和 Jest
首先，我们需要在项目中安装 Enzyme 和 Jest：
npm install --save-dev enzyme enzyme-adapter-react-16 jest babel-jest identity-obj-proxy
其中，enzyme 是 Enzyme 的主模块，enzyme-adapter-react-16 是用来适配 React 16 的 Adapter，jest 是 Jest 的主模块，babel-jest 是用来转换 JavaScript 代码，identity-obj-proxy 是用来模拟对象。
编写测试代码
假设我们要测试一个简单的组件，它只有一个输入框和一个按钮，用户输入文本后，点击按钮可以触发一个事件，将文本显示在列表中。
我们先来编写一个简单的测试用例，测试组件的渲染效果：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ----------- - ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
---这里我们使用了 Jest 的 describe 和 it 函数来定义测试用例。在 it 函数中，我们使用 shallow 函数来进行浅渲染，然后使用 expect 函数来比较渲染结果和快照。
接下来，我们来编写一个测试用例来测试用户输入文本的功能：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ----------- - ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
----------- ----- -------- -- -- -
----- ------- - -------------------- ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------- ------- - ---
----------------------------------------------------------- ---------
---
---这里我们使用了 find 函数来获取输入框，然后使用 simulate 函数来模拟用户输入文本的事件。最后，我们使用 expect 函数来判断输入框的值是否正确。
最后，我们来编写一个测试用例来测试点击按钮的功能：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ----------- - ---- ----------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - -------------------- ----
----------------------------------
---
----------- ----- -------- -- -- -
----- ------- - -------------------- ----
----- ----- - ----------------------
------------------------ - ------- - ------ ------- ------- - ---
----------------------------------------------------------- ---------
---
----------- ------ ------- -- -- -
----- ------- - -------------------- ----
----- ----- - ----------------------
----- ------ - -----------------------
------------------------ - ------- - ------ ------- ------- - ---
-------------------------
-------------------------------------------
------------------------------------------------- ---------
---
---这里我们使用了 find 函数来获取按钮，然后使用 simulate 函数来模拟用户点击的事件。最后，我们使用 expect 函数来判断列表项的数量和文本是否正确。
运行测试代码
编写好测试代码后，我们可以使用 Jest 来运行测试。在 package.json 中添加以下脚本：
"scripts": {
"test": "jest"
}然后，在终端中运行 npm run test 命令，我们就可以看到测试结果了：
-- -------------------- ---- -------
---- ------------------------------------
-----------
- ------- --------- -----
- ------- ----- ------ -----
- ------- ------ ----- -----
---- ------- - ------- - -----
------ - ------- - -----
---------- - ------- - -----可以看到，我们的测试全部通过了。
总结
通过本篇文章的介绍，我们了解了如何使用 Enzyme 和 Jest 来进行 React 组件 UI 测试。在编写测试代码时，我们需要注意以下几点：
- 测试用例应该覆盖组件的各个方面，包括渲染效果、事件处理等。
- 我们应该使用适合的渲染方式，根据实际情况选择静态渲染、shallow 渲染或完全 DOM 渲染。
- 借助 Enzyme 提供的 API，可以大大简化我们的测试代码。
欢迎读者们实践一下，练习编写一些测试代码来加深对前端测试的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64968c5048841e98943b878b