前言：在现代前端开发中，测试已经成为一个不可或缺的部分。React 应用也不例外。Enzyme 是一个非常强大的 React 测试工具，它可以帮助我们测试应用中的各个组件。
Enzyme 简介
Enzyme 是一款 Facebook 开发的 React 测试工具，它提供了一系列 API 用于测试 React 组件的行为。Enzyme 有三个不同的渲染器，分别为 shallow、mount 和 render。
shallow：渲染器只会渲染组件本身，而不会渲染子组件。mount：渲染器会渲染出整个组件树，并执行组件的生命周期方法。render：渲染器将组件渲染为静态 HTML，并返回一个 Cheerio 对象。
安装和配置
使用 Enzyme 前，我们需要先安装它和需要的 adapter。Enzyme 目前支持 React 16 以上的版本，我们这里选择安装 Enzyme 3。
npm install --save-dev enzyme enzyme-adapter-react-16
配置 Enzyme：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试用例示例
下面我们将通过一个组件示例来演示如何使用 Enzyme 进行测试。我们将编写一个 Counter 组件，它会接受一个初始值作为 props，点击按钮时会使该值 +1。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- ------------ -- -
----- ------- --------- - -----------------------
-------- ------------- -
-------------- - ---
-
------ -
-----
----------------
------- ---------------------------------
------
--
-
------ ------- --------我们将使用 Enzyme 的 shallow 和 mount 渲染器来测试该组件的行为。首先，我们将用 shallow 渲染器测试该组件是否被正确渲染：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------ ---- -- -- -
--------------- -- -- -
----- ------- - ---------------- ---------------- ----
------------------------------------
---
---上述测试验证了组件是否能够正确渲染。
接下来，我们将使用 mount 渲染器测试点击按钮时，计数器是否会加 1：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------- ---- ------------
------------------ ---- -- -- -
---------------- ----- ---- ------ -- --------- -- -- -
----- ------- - -------------- ---------------- ----
----- ------ - -----------------------
----- ----- - -------------------
----------------------------------
-------------------------
----------------------------------
---
---上述测试验证了当按钮被点击时，计数器是否会加 1。
总结
本文简单介绍了 Enzyme 的基本用法，并通过示例代码演示了如何使用 Enzyme 进行 React 组件的测试。对于需要进行单元测试的 React 项目来说，使用 Enzyme 是一个非常不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64688612968c7c53b08b5df3