React 是一个非常流行的前端框架，它提供了一种简单而又高效的方式来构建用户界面。但是，为了保证代码的质量和可靠性，我们需要进行单元测试。Enzyme 是一个 React 单元测试框架，它可以帮助我们更轻松地编写测试代码，并且可以提供更好的测试覆盖率。
Enzyme 的基本概念
Enzyme 是由 Airbnb 开发的一个 React 测试框架，它提供了一系列的 API，可以让我们更加简单和方便地进行测试。Enzyme 的主要概念包括：
Shallow rendering：Enzyme 提供了一个
shallow方法，可以对组件进行浅渲染。这意味着我们可以测试组件的渲染结果，而不用关心其子组件的实现细节。Full DOM rendering：如果需要测试组件的交互行为，我们可以使用
mount方法对组件进行完整的 DOM 渲染。这样可以模拟用户在浏览器中的真实操作。Component manipulation：Enzyme 提供了一系列的方法，可以让我们方便地对组件进行操作，比如修改组件的 props 或者触发组件的事件。
Assertions：Enzyme 支持多种断言库，可以让我们方便地编写测试断言。
安装和使用 Enzyme
Enzyme 可以通过 npm 安装，我们可以使用以下命令进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16
其中，enzyme-adapter-react-16 是针对 React 16 版本的适配器，如果你使用的是其他版本的 React，需要使用相应的适配器。
在安装完成之后，我们需要在测试代码中引入 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });这里我们使用 configure 方法来配置 Enzyme 的适配器。
使用 Shallow rendering 进行测试
下面我们来看一个简单的例子，使用 Shallow rendering 对组件进行测试。假设我们有一个 Button 组件，它接受一个 onClick 回调函数作为 props，当用户点击按钮时会触发该回调函数。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- -------- -------- -------- -- -
------ -
------- ------------------
----------
---------
--
-我们可以使用 Enzyme 的 shallow 方法对该组件进行测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
----------- -------- ----------- -- -- -
----- ------- - ---------------------- -----------------
----------------------------------- ---------
---
--------- ------- -------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------------- -------------
--------------------------
-----------------------------------
---
---在第一个测试用例中，我们使用 shallow 方法渲染 Button 组件，并断言其渲染结果是否正确。
在第二个测试用例中，我们传递了一个 onClick 回调函数作为 props，并使用 simulate 方法模拟用户点击按钮。然后我们使用 Jest 提供的 fn 方法创建了一个 Mock 函数，并断言该函数是否被调用。
使用 Full DOM rendering 进行测试
除了 Shallow rendering，Enzyme 还支持 Full DOM rendering。下面我们来看一个例子，使用 Full DOM rendering 对一个包含表单的组件进行测试。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ---- ---- ---------
---------------- -- -- -
----------- --- ---- ---- ------ ------ -- --------- -- -- -
----- -------- - ----------
----- ------- - ----------- ------------------- ----
--------------------------------------------------------- - ------- - ------ ------ - ---
--------------------------------------------------------- - ------- - ------ -------- - ---
----------------------------------------
---------------------------------------
--------- -------
--------- ---------
---
---
---在该测试用例中，我们使用 mount 方法对 Form 组件进行完整的 DOM 渲染。然后我们找到表单中的用户名和密码输入框，并使用 simulate 方法模拟用户输入。最后我们找到表单元素，并使用 simulate 方法模拟用户提交表单。然后我们断言 onSubmit 回调函数是否被调用，并且传递了正确的参数。
总结
Enzyme 是一个非常强大的 React 单元测试框架，它可以帮助我们更轻松地编写测试代码，并且可以提供更好的测试覆盖率。在使用 Enzyme 进行测试时，我们需要了解其基本概念，包括 Shallow rendering、Full DOM rendering、Component manipulation 和 Assertions。在编写测试代码时，我们应该根据实际情况选择合适的测试方法，并编写相应的测试断言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6566f8f7d2f5e1655dfe4028