Enzyme 测试 React 组件：手把手教你入门
前言
随着 React 技术的越来越普及，React 组件的可测试性变得越来越重要。而 Enzyme 就是一款很好用的测试 React 组件的库。Enzyme 提供了很多渲染组件的函数，使得我们可以很方便地测试组件的行为和输出。
介绍
Enzyme 是 Airbnb 开源的 React 组件测试工具库，它可以帮助我们测试 React 组件的 render 和交互，而无需真正渲染到浏览器或客户端。Enzyme 提供了 3 种渲染器：shallow、mount 和 render 。其中，shallow 渲染器只会渲染当前组件，不渲染其子组件；mount 渲染器会渲染整个组件树，并执行完整的生命周期；render 渲染器和 mount 一样，会渲染整个组件树，但是不会执行完整的生命周期，返回一个静态的 HTML 结构。
安装
在使用 Enzyme 测试之前，我们需要安装 Enzyme 和相关的适配器，以配合我们的 React 版本使用。
首先，我们需要安装 Enzyme ：
npm install --save-dev enzyme
然后，我们需要安装适配器，以适应我们目前使用的 React 版本：
npm install --save-dev enzyme-adapter-react-17
接着，在项目的根目录下建立一个 setupTests.js 文件，并在其中配置 Enzyme ：
// setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-17';
configure({ adapter: new Adapter() });这样，我们就完成了 Enzyme 的安装和配置。
测试 shallow 渲染器
首先，我们来测试最常用的 shallow 渲染器。下面，我们将用一个简单的计数器组件来演示。
首先，我们用 create-react-app 新建一个测试项目，安装所需的库和组件。接着，在 src 目录下新建一个 Counter 组件：
-- -------------------- ---- -------
-- ----------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
---- --------------------
----------------
---- -------------------------------
------- ---------------------------------
------
--
-
------ ------- --------这个 Counter 组件包含了一个计数器，以及一个按钮，每次点击可以将计数器加 1。接着，我们在 src 目录下新建一个 Counter.test.js 文件：
-- -------------------- ---- -------
-- ---------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---------- ------ --- ------- -- -- -
----- ------- - ---------------- ----
----- ----- - -----------------------
-------------------------------
---
---------- --------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - ---------------- ----
----- ------ - -----------------------
-------------------------
----- ----- - -----------------------
-------------------------------
---
---解释一下代码：
第一行导入 React 和 shallow 渲染器； 第二行导入 Counter 组件； 我们通过 describe 函数来分组测试用例； 第一个测试用例测试组件的快照内容是否正确； 第二个测试用例测试组件是否能够正确地渲染计数器的初始值； 第三个测试用例测试当用户点击按钮时，是否能够使计数器的值加 1。
上述测试用例中用到的三个函数：
shallow: Enzyme 的浅层渲染函数。它可以让我们快速渲染一个组件，但不会渲染其子组件。 find: Enzyme 的选择器函数。我们可以通过它来选择一个或多个特定的节点。 simulate: Enzyme 的交互函数。我们可以使用它来模拟用户与组件进行交互的行为。
测试 mount 渲染器
接着，我们来测试 mount 渲染器。与 shallow 渲染器不同，mount 渲染器会将整个组件树渲染出来，并执行完整的生命周期，使得我们可以测试包括子组件在内的所有组件。与 shallow 渲染器一样，我们可以通过 import { mount } from 'enzyme' 来引入 mount 渲染器。
我们来修改一下 Counter 组件，将它的增量改为 2，这样可以更好地演示 mount 渲染器的功能：
-- -------------------- ---- -------
-- ----------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
---- --------------------
----------------
---- -------------------------------
------- ---------------------------------
------
--
-
------ ------- --------接着，我们修改 Counter.test.js 文件，引入 mount 渲染器，来测试整个组件树：
-- -------------------- ---- -------
-- ---------------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
---------- ------ --- ------- -- -- -
----- ------- - ---------------- ----
----- ----- - -----------------------
-------------------------------
---
---------- --------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- ------ - -----------------------
-------------------------
----- ----- - -----------------------
-------------------------------
---
---可以看到，修改代码非常简单，只需将 shallow 改为 mount 就可以了。测试用例跟以前一样，没有变化。
测试 render 渲染器
最后，我们来测试 render 渲染器，它与 mount 渲染器不同，它不会执行完整的生命周期，也不会将组件渲染到 DOM 中，而是返回一个静态的 HTML 结构，所以主要用于测试组件是否能够正确地渲染 HTML。
我们来新建一个 Animal 组件，用于演示如何使用 render 渲染器：
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
-------- ------------- -
------ -
---- -------------------
--------- -----------------
------------ --------------------
------
--
-
------ ------- -------接着，我们在 Animal.test.js 文件中测试 render 渲染器：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - ------ - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------- ---------- ---------------- ----
----------------------------------
---
---我们在第一行导入 React，然后引入 render 渲染器，然后在测试用例中使用 render 渲染器来渲染 Animal 组件。最后，我们断言渲染的结果是否正确。
总结
通过本文的介绍，相信读者已经对测试 React 组件有了一定的了解。测试是开发中必不可少的环节，良好的测试案例可以大大提升产品的质量，并提高代码的可维护性。有了 Enzyme 这样的测试工具库，我们可以很方便地测试 React 组件，并且可以通过不同的渲染器达到不同的测试目标。希望读者可以通过本文的介绍，进一步提高自己的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465eab8968c7c53b0694230