简介
React 是一个流行的前端框架，它可以帮助我们开发可重用的组件，更好地管理组件状态，并提高 Web 应用程序的性能。
Enzyme 是一个用于测试 React 组件的 JavaScript 库。通过 Enzyme，我们可以创建和渲染 React 组件，并对其进行断言和查询。
在本文中，我们将使用 Enzyme 来测试一个简单的瀑布流组件。我们将探讨如何设置测试环境，编写测试用例，以及如何使用 Enzyme 中的工具来方便地测试我们的组件。
设置测试环境
在开始编写测试用例之前，我们需要先设置测试环境。
我们可以使用 Jest 来管理我们的测试环境。Jest 是一个流行的 JavaScript 测试框架，它可以自动运行测试用例，并提供丰富的断言和查询功能。
首先安装 Jest：
npm install --save-dev jest
然后在 package.json 文件中添加以下脚本：
"scripts": {
"test": "jest"
}这将允许我们通过运行 npm test 命令来运行我们的测试用例。
编写测试用例
接下来，我们可以编写我们的测试用例。我们将测试一个简单的瀑布流组件，它渲染一组图片并确保它们正确地排列在瀑布流中。
我们将使用 shallow() 方法来渲染我们的组件：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ --------- ---- --------------
------------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---
---这将运行一个测试用例并比较实际输出与存根快照。如果遇到问题，你可以通过修改我们的组件来更新存根快照。
接下来，我们将测试我们的组件是否正确渲染所有的图片：
-- -------------------- ---- -------
---------- ------ --- -------- -- -- -
----- ------ - -
- ---- -------------------------------- ------ ---- ------- --- --
- ---- -------------------------------- ------ ---- ------- --- --
- ---- -------------------------------- ------ ---- ------- --- --
- ---- -------------------------------- ------ ---- ------- --- --
--
----- ------- - ------------------ --------------- ----
----------------------------------------------------------
---这将创建一个带有四张图片的 images 数组，然后使用 shallow() 方法渲染我们的组件，并检查输出中是否包含所有的 img 元素。
现在，我们将测试我们的组件是否正确地排列所有的图片。我们将使用 prop() 方法来读取瀑布流容器的 style 属性，该属性应包含所有图片的位置和大小信息。
-- -------------------- ---- -------
---------- ------- ------ ---------- -- -- -
----- ------ - -
- ---- -------------------------------- ------ ---- ------- --- --
- ---- -------------------------------- ------ ---- ------- --- --
- ---- -------------------------------- ------ ---- ------- --- --
- ---- -------------------------------- ------ ---- ------- --- --
--
----- ------- - ------------------ --------------- ----
----- ----- - -----------------------------------------
-----------------------
--------- -----------
------ ----
------- ----
---
------------------------------------------------
-----------------------------------------------
------------------------------------------------
-------------------- -- -
----- ---------- - ----------------------------
--------------------------------
------------------------------------------------
-------------------------------------
--------------------------------------
----------------------------------------------
------------------------------------------------
---
---这将在我们的组件中找到瀑布流容器的 style 属性，并检查它是否包含所有的图片位置和大小信息。
使用 Enzyme 工具
除了上述的工具和方法外，Enzyme 还提供了许多其他的工具来方便地测试 React 组件。下面是一些常用的工具：
mount()
mount() 方法可用于完全渲染组件，包括所有子组件和嵌套组件。这对于测试包含多个复杂子组件的组件非常有用。
find()
find() 方法可用于查找输出中的特定元素，例如 img 或 div 元素。可以使用选择器语法来查找元素，例如 .image 或 #title。
simulate()
simulate() 方法可用于模拟用户事件，例如单击或键盘事件。这对于测试用户交互行为非常有用。
prop()
prop() 方法可用于读取组件的属性值。这对于检查属性是否正确传递非常有用。
结论
本文介绍了如何使用 Enzyme 在 React 中测试瀑布流组件。我们介绍了如何设置测试环境，编写测试用例，并使用 Enzyme 中的工具来方便地测试我们的组件。
可以使用 Enzyme 测试工具来帮助保证我们的 React 组件质量，确保它们能够按预期工作并随时响应不同的用户行为。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- - -- ------ -- -- -
----- -------------- - ----
----- ------------ - --
----- ---------- - -------------- - -------------
----- ------------- - ------------ ------- ------------ -- -- -- ---
----- ----------------- - ------- ------------ -- -
----- ----- - ---------- - ------------
----- ----------- - ------------ - ------
----- ---- - ---------- - ------------
----- --- - ---------------------------
-------------------------- -- ------------
------ -
--------- -----------
----
-----
------ -----------
------- ------------
--
--
------ -
---- --------------------- -------- --------- ----------- ------ --------------- ------- -------------------------- ---
------------------- ------ -- ---- ----------- ----------------- --------------- ------------------------------- ----- - -------------- ----
------
--
--
------ ------- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674b172c0b2e50ef995454a3