随着前端技术的发展，React 已经成为了越来越多开发者的首选框架。而随着项目复杂度的不断增加，测试显得更加必要。本文将介绍如何使用 Enzyme 对 React 组件进行单元测试，从而提高代码的可靠性和可维护性。
Enzyme 简介
Enzyme 是一款由 Airbnb 开源的用于 React 组件测试的 JavaScript 工具库。它提供了一系列 API，能够让开发者更加方便地模拟和操作组件的各种状态，使得测试变得更加简单易用。
Enzyme 提供了三种 API：
shallow：浅渲染（不考虑子组件），可以获取组件的 props 和 state 状态。mount：完全渲染，可以获取组件的 props 和 state 状态，以及子组件的信息。render：类似于 DOM 的渲染，适用于与静态 HTML 结构进行比较。
通过这三种 API，我们可以完成对组件各种状态的测试，进而保证代码质量。
安装
在使用 Enzyme 进行测试之前，需要先安装它以及所需依赖。
npm i --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme-adapter-react-16 为 Enzyme 针对 React 16 版本的适配器。
基本测试用例
我们以一个简单的 Demo 作为示例，此 Demo 的功能是对传入的字符串进行反转。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------- - -- ------- -- -- -
----- -------------- - -------------------------------------
------ -
-----
----------------
------
--
--
------ ------- --------------我们现在需要对 ReverseString 组件进行测试。首先，我们通过 shallow 方法进行浅渲染，再通过 dive 方法获取到渲染后的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------------- ---- ------------------
-------------- ------------- ----------- -- -- -
----- ------- - ------ ---------
----- ------- - ---------------------- ----------------- -----------
---------- ----------- -- -- -
----------------------------------
---
----------- ------ ----------- -- -- -
--------------------------------------------------------------------------
---
---我们通过 expect 断言来判断测试条件是否符合预期。其中，toMatchSnapshot 方法判断是否和上一次快照的结果一致，toBe 方法则用于判断两个表达式是否完全一致。这里我们的测试通过了两个断言。
进阶测试用例
如果组件需要通过 props 传递函数，我们需要模拟这个函数进行测试。比如，在以下示例中，我们将测试函数在按钮被点击时是否被正确调用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------------- ---- ------------------
-------------- ------------- ----------- -- -- -
----- ------- - ------ ---------
----- ------- - ----------
----- ------- - -------------------- ----------------- ----------------- ----
---------- ----------- -- -- -
----------------------------------
---
----------- ------ ----------- -- -- -
--------------------------------------------------------------------------
---
-------- ------- -------- ----------- -- -- -
-----------------------------------------
-----------------------------------------
---
---使用 jest.fn() 来模拟 onClick 函数，并使用 simulate 方法触发按钮点击事件。
总结
使用 Enzyme 可以帮助我们更加方便地进行 React 组件的单元测试。本文介绍了 Enzyme 的基本使用方法和进阶操作，希望能对大家进行 React 开发时进行单元测试有所帮助。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0a6d048841e9894cbb557