React 组件单元测试在前端开发中扮演了极为重要的角色，但却常常被忽视。而 Enzyme，一个由 AirBnb 开源的 React 组件测试工具，可以让组件的测试更为简单和方便。本文将介绍 Enzyme 的基本用法，希望能够降低大家在 React 组件单元测试中的难度。
为什么使用 Enzyme
Enzyme 是一个针对 React 组件的 JavaScript 测试工具库，它使得组件的单元测试变得更容易、更具可读性和更加强大。使用 Enzyme 可以做到以下几点：
- 简化组件层级分析
- 使用适当的测试方式来处理 React 组件
- 方便地搜索和遍历组件
- 更方便地模拟用户行为
- 适用于所有主要渲染器（例如，React DOM 和 React Native）
因此，使用 Enzyme 可以大大降低 React 组件单元测试的难度和复杂性。
安装 Enzyme
在开始之前，我们需要安装 Enzyme。这可以通过在终端中运行以下命令来实现：
npm install --save-dev enzyme react-test-renderer enzyme-adapter-react-16
这个命令会安装 Enzyme 的核心库 enzyme 以及它所依赖的工具库 react-test-renderer 和 enzyme-adapter-react-16。我们需要安装正确版本的适配器，以便与我们正在使用的 React 版本兼容。上面的命令安装的是 React 16 的适配器。
基本用法
安装完成后，让我们使用 Enzyme 来测试一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
------ -
------- ------------------------
-------------
---------
--
-我们可以编写一个测试文件 button.test.js，然后在其中编写以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ --------- -- ------- ------ -- -- -
----- --------- - --------------- ------------ ---- ----------- -- ------------------------ ----
------------------------------------
---
---在上面的代码中，我们首先导入了 React 和 shallow 函数（其中 shallow 函数是由 Enzyme 提供的一种测试方法，其可以快速渲染组件到虚拟DOM中）。然后我们编写了一个测试套件，其中包含了一个测试用例。这个测试用例会渲染一个简单的 Button 组件，为其传递一些属性，如 label 和 onClick。
用 shallow 函数渲染之后，我们通过 toMatchSnapshot 来比较渲染的结果是否与我们的预期相符。如果相符，则测试通过；否则就会失败。
在终端中，我们可以通过运行以下命令来运行这个测试文件：
npm run test
这个命令会读取我们项目目录下的所有测试文件，并显示它们的运行结果。
测试子组件
有时候，我们需要测试一个组件的子组件。可以使用 Enzyme 提供的 find 和 prop 方法。举个例子，我们有一个包含了一个 Button 组件的 Counter 组件，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -----------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
------------- -
----------------------- -- --
------ --------------- - --
----
-
-------- -
------ -
-----
----- -------------------------------------------
------- ----------------- ----------- -- ------------------- --
------
--
-
-
------ ------- --------我们可以用下面的代码，测试 Counter 组件是否正确：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
--- --------
------------- -- -
------- - ---------------- ----
---
---------- ------ --------- -- -- -
----------------------------------------------
---
---------- ---- - ------ -- -- -
-----------------------------------------------
---
---------- ---- - ------ ----------- -- -- -
-----------------------------------------------
---
---------- ---- - ------ --------- ---- - ------- ---- ------ -- ------------- -- -- -
----------------------------------------------------------------
---
---在上面的代码中，我们首先导入了 React 和 shallow 函数，以及我们要测试的 Counter 组件。然后，我们声明了一个变量 wrapper，它存放了我们使用 shallow 函数渲染出来的 Counter 组件。
接着，我们编写了四个测试用例。第一个测试用例确保 Counter 组件有且只有一个包含在 div 标签中。第二个测试用例确保 Counter 组件有且只有一个包含在 span 标签中。第三个测试用例检查 Button 组件是否存在，最后一个测试用例检查 Button 组件是否有一个正确的 label 属性。
模拟用户行为
模拟用户行为在 React 组件测试中十分重要。Enzyme 提供了丰富的 API 来模拟用户在组件上的事件操作。我们可以使用 simulate 方法来触发这些事件。
在下面的代码中，我们将使用 simulate 方法来测试点击 Button 组件时状态是否正确更新了：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
--- --------
------------- -- -
------- - ---------------- ----
---
---------- ------ --------- -- -- -
----------------------------------------------
---
---------- ---- - ------ -- -- -
-----------------------------------------------
---
---------- ---- - ------ ----------- -- -- -
-----------------------------------------------
---
---------- ---- - ------ --------- ---- - ------- ---- ------ -- ------------- -- -- -
----------------------------------------------------------------
---
---------- ------ ----- ----- -------- ---- ------ -- --------- -- -- -
---------------------------------------------------
---------------------------------------
---------------------------------------------------
---
---在上面的测试用例中，我们首先断言了 span 元素的文本内容是否为 0。然后，我们使用 simulate 方法来模拟一个点击 Button 组件的操作。最后，我们再次断言 span 元素的文本内容是否为 1，以确保状态已正确更新。
结论
Enzyme 是一个强大的 React 组件测试工具，它可以使得组件的单元测试更为简单、容易和强大。它可以简化组件层级分析，使用适当的测试方式来处理 React 组件，方便地搜索和遍历组件，更方便地模拟用户行为，并适用于所有主要渲染器。希望这篇文章能够对你在 React 组件单元测试中使用 Enzyme 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67079b50d91dce0dc86ab842