在前端开发中，测试组件的正确性和可靠性是至关重要的。在 Jest 测试框架中，结合 enzyme 库可以方便的进行组件测试。本文将为大家展示如何使用 Jest 测试框架和 enzyme 库进行组件测试的完整实例，并包含示例代码以及详细的学习和指导意义。
什么是 enzyme
Enzyme 是 React 中一个流行的 JavaScript 测试工具，它能够在测试环境中模拟和操作 React 组件的输出结果。Enzyme 的操作和测试方法类似于 jQuery 的 DOM 操作方法，可以方便地获取组件的状态和 props 数据并对其进行断言。
Jest 和 enzyme 的配置
在使用 Jest 和 enzyme 进行组件测试之前，我们需要进行相关的配置。首先安装 Jest 和 enzyme：
npm install jest enzyme enzyme-adapter-react-16 --save-dev
然后，在 Jest 的配置文件中添加如下配置：
-- -------------------- ---- -------
-- --------------
-------------- - -
-------------------- -------
------------ ----------------------------------------------------
----------------------- -
-----
-------
------
-----
------
------
--
------------------- -
---------------------- ---------------------
------------------------------------- --------------------------------------
--
------------ -
-------------- ------------
--
---------- -
----------- ------
--
--------------------- -
----------------------------------
--
-------------------- -
-------
------
-
-其中，我们需要添加 enzyme-adapter-react-16 的适配器：
// src/test/setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这样，我们就在 Jest 中成功配置好了 enzyme 的使用。
编写第一个 enzyme 组件测试
在 Jest 和 enzyme 的配置完成之后，我们就可以开始编写我们的第一个组件测试了。首先让我们来看一下我们需要测试的组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
-------------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
------ -
-----
---------- -----------------------
------- ------------------------------------------------
------
--
-
-
------ ------- ----这是一个非常简单的计数器组件，当我们点击按钮时，它会自动增加计数器的数量。
接下来，我们就可以编写我们的第一个 enzyme 组件测试啦：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ --- ---- --------- --------- ---------- --- ------- -- -- - ----- ------- - ------------ ---- ----- ------ - ----------------------- ------------------------- ----- ---- - -------------------------- ------------------------- ---- ---
我们首先导入了 React 和 shallow 方法，然后告诉它我们需要测试的组件是 App，接下来模拟点击按钮，然后断言计数器的 text 是 Count: 1。这就是一个简单的基于 enzyme 的组件测试。
enzyme 的基本操作
在实践中，通常我们不仅需要测试一个简单的计数器组件，而需要测试一些更加复杂的组件。
在使用 enzyme 进行组件测试时，我们可以使用以下方法：
shallow: 浅渲染一个组件，只渲染组件本身，测试目的在于组件的行为mount: 完全渲染一个组件，包括 DOM 子树，测试目的在于组件对样式和布局的影响render: 期望输出静态 HTML，测试目的在于组件的输出simulate: 模拟组件的一些行为，比如点击、滚动等find: 查找匹配的节点prop: 获取/设置节点属性state: 获取/设置组件的状态setProps: 设置组件的 props
在编写复杂的测试用例时，我们需要熟练使用以上方法，以获取和判断组件的状态和输出结果。
Jest 和 enzyme 组件测试实践
在本文最后，我们将介绍一个实际的 Jest 和 enzyme 组件测试的案例。以下是一个来自react-hooks-shopping-cart的购物车例子：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ --------- ---- -------------
------ ----------- ---- -----------------
------ -------- ---- -------------
----- ---- - -- ---- -- -- -
----- - ---------- ---------- - - ------------------------
------ -
---- -------- -------- ---- - ------- - ------ ---
--------------------- ------ -- -
--------- ----------- ----------- --
---
----------- -----------------------------
------
--
--
-------------- - -
----- --------------------------
--
------ ------- -----
首先，我们需要测试 Cart 组件是否能够正确渲染。这是我们的一个测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ---- ---- ----------
--------------- ---- -- -- -
----------- --------- ------- ---------- -- -- -
-------------------- ----------- -----------------------
---
---在这个测试用例中，我们使用 enzyme 的 shallow 方法来浅渲染 Cart 组件，并检查是否能够成功进行渲染。
接下来我们来测试它能否正确计算购物车中商品的总价：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ------- - ---- ---------
------ -------- ---- ----------------------
------ ---- ---- ----------
------ -------- ---- --------------
------ ----------- ---- ------------------
--------------- ---- -- -- -
--- --------
------------- -- -
----- ------------- - -
-
--- ------------
------ ----- ------- ---
------ ------
--------- --
--
-
--- ------------
------ ----- ------- ---
------ ------
--------- --
--
--
----- -------------- - ------
------- - --------
--------------------- -------- ---------- -------------- ----------- -------------- ---
----- ----------- --
------------------------
--
---
----------- ---- ---- ---------- ----------- -- -- -
----------------------------------------------
---
----------- ----- ----- ----------- -- -- -
-------
-------
------------
-------
--------
-------------- ----------------------
---
----------- ---------- -- -- -
----- ---- - --------
--------
--------------------- -------- ---------- --- ----------- - ---
----- ------------ --
------------------------
-
----------
-------------------------------
---
---在测试用例中我们假设购物车中有两件商品，分别是Test Product 1和Test Product 2，价格分别为 12.34 和 56.78。然后我们可以测试以下事项：
renders cart item components correctly测试购物车是否正确呈现商品列表组件renders total price correctly测试是否能够正确计算购物车中的总价matches snapshot测试渲染后组件是否与预期一致
结论
在本文中，我们介绍了如何使用 Jest 和 enzyme 进行组件测试的完整实例，并讲解了 Jest 和 enzyme 的配置，enzyme 的基本操作，以及一些 Jest 和 enzyme 的组件测试实践。相信通过本文的学习，大家已经对 Jest 和 enzyme 的使用有了更深入的了解，对于组件测试也有更多的实战经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c520bddd3a70eb6d76eaa