在前端开发中，测试是一个不可避免的环节。对于 React 组件的测试，Enzyme 是一个非常好用的工具。本文将介绍 Enzyme 的使用方法，包括安装、初始化、基本用法、进阶用法等。
安装 Enzyme
安装 Enzyme 非常简单，可以使用 npm 或 yarn 来进行安装。以下是 npm 安装的命令：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme-adapter-react-16 是 Enzyme 和 React 的适配器，需要针对 React 的版本来选择相应的适配器。如果使用的是 React 15，则需要安装 enzyme-adapter-react-15。
初始化 Enzyme
在使用 Enzyme 前，需要进行初始化。一般在 setupTests.js 文件中进行全局的初始化，它会在所有测试用例执行前调用。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });基本用法
下面我们来看一个简单的 Enzyme 测试示例。假设我们有如下的组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------ -- ------ ------- -- -
------ -
------- ------------------
-------
---------
--
-
------ ------- -------我们要测试这个组件是否能够正常地渲染出按钮，并且点击按钮后是否能够正确地触发回调函数。测试用例的代码如下：
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ------ ---- ----------- ----------- - ------ ---- --- -- --------- -- -- - ----- ----------- - ---------- ----- ------- - --------------- ------------ --- --------------------- ---- ----- ------ - ----------------------- --------------------------------- ----- ------------------------- --------------------------------------------- ---
上面的代码中，我们使用 shallow 方法来创建一个组件的浅渲染。然后使用 find 方法来查找组件中的子元素（这里是一个 button 元素），并使用 simulate 方法来模拟触发按钮点击事件。使用 Jest 的 fn 方法来模拟一个回调函数，使用 toHaveBeenCalledTimes 方法来判断回调函数是否被正确地执行了。
进阶用法
除了基本的用法，Enzyme 还提供了许多进阶的用法。这里我们来介绍两个常用的方法。
mount 渲染
在测试组件时，有时候需要测试组件在真实的 DOM 环境中的行为。这时，我们可以使用 mount 方法来进行渲染。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ ------ ---- ----------- ------- -- --------- -- -- - ----- ----------- - ---------- ----- ------- - ------------- ------------ --- --------------------- ---- ----- ------ - ----------------------- --------------------------------- ----- ------------------------- --------------------------------------------- ------------------ ---
需注意，在测试完毕后需要使用 unmount 方法将组件卸载掉，以免对后续测试造成影响。
mock 模拟
有时候，组件中会依赖一些外部的模块或函数，我们可以使用 Enzyme 的 jest.mock 方法来模拟它们，并在测试中使用模拟的模块或函数。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ ------ ---- ----------- ------ --- ---- -------- ------------------- ---------- ---- -- --- ---- ---- --------- -- -- - ----- ----------- - ---------- ------------------------------- ------- --------- --- ----- ------- - ------------- ------------ --- --------------------- ---- ----------------------------------------- --------------------------------------------- --------------------------------------------- ---
上述代码中，我们使用 jest.mock 方法来模拟 api 模块，并使用 mockResolvedValue 方法来模拟 API 的返回结果。在测试中，我们可以查询模拟函数的调用次数、传入的参数等信息。
总结
本文介绍了 Enzyme 这个 React 组件测试的工具，包括安装、初始化、基本用法、进阶用法等。在实践中，我们可以结合 Jest 等单元测试框架来进行组件测试，以保证代码的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a61dab48841e98942a5b07