在前端开发中，测试是一个重要的环节。而 Enzyme 就是 React 生态系统中比较流行的测试工具之一。本文将为您详细介绍 Enzyme 的基本 API，并讲述如何结合 Jest 进行测试。
Enzyme 概述
Enzyme 是由 Airbnb 开源的 React 测试工具，可以用于测试 React 组件的渲染结果。Enzyme 提供了一些列的 API，可以方便地进行组件测试、交互测试，包括了浅渲染（Shallow Rendering）、完整渲染（Full DOM Rendering）以及静态渲染（Static Rendering）。
Enzyme 的基本 API
shallow
shallow 方法是 Enzyme 提供的最常用的方法之一。它用于创建一个组件的“浅层副本”，并返回一个 Enzyme 的实例。这个实例可以进行断言和其他操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
----------------- ---- -- -- -
----------- ------- ------- -- -- -
----- ------- - --------------- ----
----------------------------------
---
---在上面的测试中，我们使用 shallow 方法来创建一个 button 组件的浅层副本，并对其做出断言。
mount
如果你需要对组件进行更深入的测试，那么就需要使用 mount 方法。mount 方法可以模拟完整的 DOM 渲染，并返回一个实际的 DOM 元素对象。这个实际的 DOM 对象可以被用来测试组件的交互等行为。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
----------------- ---- -- -- -
--------- ------- ---- --------- -- -- -
----- ----------- - ----------
----- ------- - ------------- --------------------- ----
---------------------------------------------
-----------------------------------------
---------------------------------------------
---
---在上面的测试中，我们使用 mount 方法创建了一个 button 组件的完整副本。然后我们对副本中的 button 元素进行模拟点击，并对 onClick 函数的调用次数进行断言。
render
render 方法只渲染组件的静态内容，并返回一个类似与 mount 方法返回的 DOM 元素的实体。与 mount 方法不同的是，render 方法不会执行组件的生命周期方法。这种方法使得我们可以测试纯 React 组件的静态内容，而无需过多关注交互逻辑。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------ - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
----------------- ---- -- -- -
----------- ---- ------ ------- -- -- -
----- ------- - -------------- ------------- ------ ----
----------------------------------
---
---在上面的测试中，我们使用 render 方法渲染了组件的静态内容，并断言渲染结果与预期相同。
结合 Jest 进行测试
Jest 是一种流行的 JavaScript 测试框架，可以轻松测试代码的正确性。我们可以使用 Jest 配合 Enzyme 来测试 React 组件。下面是一个简单的例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------ ---- -----------
------------------ -------- --- --------- ---
----------------- ---- -- -- -
----------- --------- ---- -- ------- -- -- -
----- ------- - --------------- ----
----------------------------------
---
----------- --------- ---- ------ ------- -- -- -
----- ------- - --------------- ------------- ------ ----
----------------------------------
---
--------- ------- ---- ---- --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------- ----
-----------------------------------------
---------------------------------------
---
---使用 Jest 和 Enzyme 进行测试的步骤如下：
安装 Jest 和 Enzyme。
npm install --save-dev jest enzyme enzyme-adapter-react-16
在测试文件中配置 Enzyme 适配器。
import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });创建一个测试块，并在该块中编写测试代码。
describe('Test Name', () => { // write tests here });在测试块中配置您要测试的组件，并使用 shallow、mount 或 render 方法进行测试。
const wrapper = shallow(<Button />); const wrapper = mount(<Button />); const wrapper = render(<Button />);
对测试结果进行断言。
expect(wrapper).toMatchSnapshot(); expect(onClickMock).toHaveBeenCalled();
结论
在本文中，我们详细介绍了 Enzyme 的基本 API，包括浅渲染、完整渲染以及静态渲染。最后，我们还演示了如何使用 Jest 结合 Enzyme 进行测试。希望这篇文章对您理解和使用 Enzyme 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a5255a1ce00635487cf52