1. 什么是 Enzyme
Enzyme 是一款 React 组件测试工具，由 Airbnb 开源。它提供了更直观、易于编写和阅读的测试用例编写方式，同时还扩展了 ReactTestUtils 库的功能。Enzyme 可以让我们在测试 React 组件时更方便地创建组件实例，并从中获取其状态和属性，以及模拟用户事件并检查渲染输出。
2. 如何安装 Enzyme
我们可以使用 npm 或者 yarn 来安装 Enzyme，只需要在终端输入下面的命令：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
其中，enzyme 是 Enzyme 的核心包，enzyme-adapter-react-16 是适配器包，用于适配 React 版本。如果你使用的是 React 15，需要安装 enzyme-adapter-react-15。
3. 如何使用 Enzyme 测试 React 组件的性能
3.1. 测试用例编写
Enzyme 提供了三个渲染器——shallow、mount、render，它们分别在不同的场景下使用。其中，shallow 用于浅渲染，只渲染当前组件，不渲染任何子组件。mount 用于完整渲染，渲染当前组件及其子组件。render 用于静态渲染，返回渲染后的 HTML 字符串。
我们可以通过这三个渲染器来测试 React 组件的性能。下面，我们以 shallow 为例，来编写一个测试用例。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
--------------- -- -- -
------------- -- -- -
----- ------- - ------------ ----
------------------------------------------------- ---------
---
---在这个测试用例中，我们首先引入了 React 和 shallow，然后引入了我们要测试的组件 App。在测试用例中，我们使用 shallow 渲染 App 组件，并查找其中的 h1 标签，检查它的文本内容是否与我们预期的一致。
3.2. 性能测试
除了测试组件的正确性外，Enzyme 还可以测试组件的性能。我们可以使用框架自带的 performance API，来 测量组件渲染所需的时间。
我们只需要在 render() 方法中添加测量代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------ - ---- -------
------ - ---------- - ---- --------
----- --- ------- --------- -
------------- -
--------
---------- - -
-------- -----
-------- ------
--
-
----------- - ----- -- -- -
----- - -------- ------- - - -----------
-- --------- -- --------- -
---------------
-------- -----
---
----- ------- - ----- -------------
---------------
--------
-------- ------
---
-
-
-------- -
----- - -------- ------- - - -----------
-- --------- ------ ----------------------
------ -
-----
---------- -----------
-------- --
-----
------------ --------------- ---------------------
--------------- --------------------- -----
------------- -----------------------
------
-
------- ------------------------------ ----------------
------
--
-
-
------ ------- ----测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
--------------- -- -- -
------------- -- -- -
----- ------- - ------------ ----
------------------------------------------------- ---------
---
----------- ------- ----- ------ --------- -- -- -
----- ----- - ------------------
----- ------- - ------------ ----
----- ------ - -----------------------
-------------------------
----- ------- - ----------------- - ------
-----------------------------------------------
--------------------------------------------
-----------------------------------
---
---在上面这个测试用例中，我们点击 Button 后，使用 performance.now() 方法来获取开始时间和结束时间，然后计算两者之差，得到组件渲染所需的时间。在断言时，我们需要确保 elapsed 小于一秒，来保证测试用例的性能。
4. 总结
通过上面的示例代码，我们可以使用 Enzyme 来测试 React 组件的性能。Enzyme 提供了三个渲染器，我们可以根据不同的测试场景，选择不同的渲染器。同时，Enzyme 还提供了更直观、易于编写和阅读的测试用例编写方式，可以让我们更快、更准确地测试组件的正确性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0b54283d39b488150de01