什么是 Enzyme？
Enzyme 是一款由 Airbnb 开发的 React 组件测试库。它简单易用，提供了强大的 API，适合单元测试和集成测试。
Enzyme 的主要特点有：
- 浅渲染：只渲染 React 组件的父组件，不渲染子组件，可以更快速地进行测试；
- 完整渲染：完全渲染 React 组件及其子组件，可以测试组件在浏览器中的工作情况；
- 查询 API：可以方便地查询组件的渲染结果、事件和状态；
- 支持多种渲染引擎：支持 React、React Native、Preact、Inferno 等多个渲染引擎。
安装 Enzyme
在使用 Enzyme 之前，我们需要先安装它。
npm i -D enzyme enzyme-adapter-react-16
其中，enzyme 是 Enzyme 的核心库，enzyme-adapter-react-16 是 Enzyme 对 React 16 的适配器。
在 React 组件中使用 Enzyme
在测试 React 组件之前，我们需要先编写 React 组件。下面是一个简单的示例组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
----- - -------- -------- - - ------
------ -
------- ------------------
----------
---------
--
-
------ ------- -------这个组件是一个按钮，有两个 props：onClick，点击按钮时触发的回调函数；children，按钮的文本内容。
接下来，我们使用 Enzyme 来测试这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- -------- ---- ------ ---- -- -- -
----- ------- - ---------
--------
---- ------------------ --
---------
---
---------------------------- ------------------ ----------------
---
------------- ----- -------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------- ----
-----------------------------------------
-----------------------------------
---
---上面的代码中，我们首先引入了 shallow 函数和 Button 组件，然后编写了两个测试用例。
第一个测试用例中，我们使用 shallow 函数来浅渲染 Button 组件，然后使用 contains 函数来检查子组件是否已经渲染。第二个测试用例中，我们模拟了点击事件，使用 simulate 函数来触发点击事件，然后检查回调函数是否已经被调用。
Enzyme 的查询 API
Enzyme 提供了一系列强大、灵活的查询 API，可以方便地查询组件的渲染结果、事件和状态。下面是一些常用的查询 API：
shallow：浅渲染组件；mount：完全渲染组件；render：渲染组件为静态 HTML，并返回一个 Cheerio 对象；.text()：获取组件的文本内容；.html()：获取组件的 HTML 内容；.find(selector)：通过选择器查找子组件；.at(index)：获取指定索引的子组件；.simulate(eventName, args)：模拟事件，并传递参数。
下面是一个使用查询 API 的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- -- -------- --------- -- -- -
----- ------- - --------------- ----
-----------------------------------------------
---
----------- ------ -- -- -
----- ------- - ---------------------- -----------------
-------------------------------------- ---------
---
------------- ----- -------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------- ----
-----------------------------------------
-----------------------------------
---
---在 React Native 组件中使用 Enzyme
除了 React，Enzyme 还可以用于测试 React Native 组件。不同于 React，React Native 的组件渲染方式是完全不同的，它使用了底层的原生组件来渲染界面。因此，我们需要另外一种适配器来让 Enzyme 支持 React Native。
Enzyme 官方提供了一个名为 enzyme-react-native 的适配器，我们可以使用它来测试 React Native 组件。安装命令如下：
npm i -D enzyme enzyme-react-native
使用方法与 React 类似，只需要将 shallow 函数替换为 shallow 或 mount 函数即可。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- -- ------------------ --------- -- -- -
----- ------- - --------------- ----
---------------------------------------------------------
---
----------- ------ -- -- -
----- ------- - ---------------------- -----------------
-------------------------------------- ---------
---
------------- ----- -------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------- ----
---------------------------------------------------
-----------------------------------
---
---总结
Enzyme 是一款强大的 React 组件测试库，提供了丰富的查询 API，可以方便地测试组件的渲染结果、事件和状态。无论是 React 还是 React Native，Enzyme 都能够轻松应对，是 React 开发者不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476b16a968c7c53b0358a32