Reactjs 是一个基于组件的前端框架，性能优异，易于维护。Enzyme 是 Reactjs 的一个测试工具，用于在组件层次结构中进行交互和断言测试。
在这篇文章中，我们将介绍 Enzyme 的使用方法并配以示例代码，帮助您更好地掌握此技术。
安装 Enzyme
安装 Enzyme 就像安装其它 npm 包一样简单：
--- ------- ---------- ------
配置 Enzyme
要开始使用 Enzyme，您需要在文件开头导入 Enzyme：
------ ------ ---- --------- ------ ------- ---- --------------------------
然后，您需要为您的测试框架选择适当的适配器。这个适配器将决定 Enzyme 应该如何与测试框架集成。假设您正在使用 Jest 测试框架，那么您需要在 setupTests.js 文件中设置适配器：
------ ------ ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- ---
如果您使用的是其它测试框架，请查阅相关文档了解更多细节。
测试组件渲染
一个最基本的测试就是检查组件是否能够被渲染。在 Enzyme 中提供了不同方法验证组件的渲染，包括 shallow() 和 mount()。这两个方法都对组件进行渲染，但 shallow() 只渲染组件本身，而 mount() 渲染整个组件树。
让我们以 shallow() 方法为例进行说明。假设有一个简单的 <Button> 组件可以接收 onClick 和 text 属性：
------ ----- ---- --------
------ ----- ------ - -- -------- ---- -- -- -
------- ------------------
------
---------
--要测试该组件是否可以被渲染，我们可以使用以下代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ------ - ---- -----------
----------------- ---- -- -- -
---------- -------- -- -- -
----- ------- - --------------- ----
------------------------------------
---
---在这里，我们首先导入 shallow() 方法和 <Button> 组件。然后在 it() 块中，我们编写一个简单的测试，使用 shallow() 方法渲染 <Button> 组件。最后我们使用 exists() 方法验证组件是否已经成功渲染。
测试组件行为
在测试行为方面，Enzyme 提供了多种方法来模拟用户交互。其中，最常用的方法是 simulate()。这个方法可以模拟在组件上触发的事件，如点击、键盘按下等。让我们使用 simulate() 方法模拟 <Button> 组件的点击事件：
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ------ - ---- -----------
----------------- ---- -- -- -
---------- ---- ------- ---- --------- -- -- -
----- ------- - ----------
----- ------- - --------------- ----------------- ----
--------------------------
-----------------------------------
---
---在这里，我们首先定义了一个 Jest 测试框架的 mock 函数 jest.fn()。这个函数可以记录函数是否被触发。在测试开始时，我们用 shallow() 方法渲染出 <Button> 组件，并将 onClick 属性设置为我们的 mock 函数。然后我们使用 simulate() 方法模拟点击事件，并通过 expect() 断言验证 mock 函数是否被触发。
测试组件状态
测试组件状态也很重要。在 Reactjs 中，组件状态通常存储于 state 属性中。Enzyme 提供了一种方法用于直接查看组件的状态。该方法是 state()。
假设有一个包含输入框和按钮的组件，可以将输入框中的文本添加到列表中。组件的状态包括 text 和 list。当用户点击按钮时，组件会将文本添加到列表中。让我们使用 state() 方法来验证此功能：
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ---- - ---- ---------
--------------- ---- -- -- -
---------- --- --- ---- -- ---- ---- ------ -- --------- -- -- -
----- ------- - ------------- ----
------------------ ----- ----- -- ---
-----------------------------------------
-------------------------------------------- -----
---
---在这里，我们使用 shallow() 方法渲染 <Form> 组件。然后我们手动调用 setState() 方法，将 text 属性设置为 "Item 1"。接下来，我们使用 find() 方法找到按钮元素，并使用 simulate() 方法模拟按钮的点击事件。最后通过 state() 方法取得 list 属性，验证组件是否正确添加了新的元素到列表中。
总结
在本篇文章中，我们介绍了 Enzyme 的基本概念，以及如何在 Reactjs 中使用 Enzyme 进行测试。测试是开发的重要一环，良好的测试策略可以为整个项目的开发提供帮助。希望文章对您理解和使用 Enzyme 有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6539c7007d4982a6eb348935