Enzyme 是一个针对 React 组件进行测试的 JavaScript 工具库。它提供了一些方法来模拟 DOM 操作、渲染 React 组件并检查组件的行为、属性以及渲染内容。在这篇文章中，我们将深入来介绍 Enzyme 的 find、filter、map 和 reduce 方法。我们将讨论它们的作用、使用方法以及示例代码。希望本文可以为读者提供深入学习和掌握 Enzyme 的技巧和指导。
Find 方法
find 方法可以帮助我们通过选择器在渲染树中查找匹配的元素。这个方法使用 jQuery 的选择器语法，可以将选择器链式调用拼接在一起。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ---- --- --- ------- ---- --- ----- ----------- -- -- -
----- ------- - -------------------- ----
-----------------------------------------------------
---
---在上面的示例中，我们首先通过shallow方法渲染了MyComponent。然后，我们使用find方法定位到了组件中包含.my-class类名的div元素，并通过toHaveLength方法断言这个元素只出现了一次。
Filter 方法
filter 方法可以用于使我们能够选择出与输入的属性匹配的元素，具体实现时需要传入一个回调函数，这个函数会对每一个元素进行测试。当测试通过时，该元素会被 include 应在结果数组中。如果测试失败，那么该元素将不被注意。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ---- --- --- --- -------- ---- --- ----- --------- --- --- ---------------- -- -- -
----- ------- - -------------------- ----
------------------------------------------- -- ---------------------- --- ---------- -- ---------------------- --- -----------------------
---
---在上面的示例中，我们首先通过shallow方法渲染了MyComponent。然后，我们使用了find方法选择所有的div元素，在利用filterWhere方法对每一个元素进行判断，判断该元素是否符合条件: className等于my-class且data-item等于🐶。在这个例子中，我们断言符合这一条件的元素有 2 个。
Map 方法
map 方法允许我们对选定的元素进行一个映射，返回一个新数组。使用 map 方法时，需要传入一个回调函数，这个函数基于选定的元素返回新的“被映射”的元素。我们可以使用此方法将元素的外部属性映射到测试中的一个数组种。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ - -------- -- -- -
----- ------- - -------------------- ------------------ --------- ---------- ----
----------------------------------- -- ------------------------------------- --------- -----------
---
---在上面的例子中，我们首先通过shallow方法渲染MyComponent，并将一个包含三张图片地址的数组作为images传递给组件。然后，我们使用find方法选定所有的img元素，并使用map方法将每个img元素的src属性值映射到一个新的数组中。最终，我们使用toEqual语句判断数组是否相等。
Reduce 方法
reduce 方法允许我们通过将选定元素映射到共享数据中来聚合它们。使用 reduce 方法时，需要传入一个回调函数，该回调函数将接收累加器和当前处理的元素，每一次都必须返回新的累加器。
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- --- -- --- ---- ------------ ------ -- ----- ----- -- -- -
----- ------- - -------------------- ----------------------- ----- -------- ---- -------- ----- ----
------------------------------------------- -- -- --- - ----------------- -----------------
---
---在上面的预示中，我们首先将一个包含三个对象的数组作为invoiceItems传递给MyComponent。然后，我们使用find方法选定所有的Invoice组件，并使用reduce方法将它们的amount属性累加到一个共享数据中。最终，我们使用toEqual语句验证预期的结果，也就是163。
结论
在上面的文章中，我们探讨了 Enzyme 的 find、filter、map 和 reduce 方法。它们可以帮助我们在渲染树中查找匹配的元素、筛选与输入属性匹配的元素、映射选定的元素到新数组中，并通过将它们聚合到一起来留下深刻印象。测试在前端中是很重要的，可以帮助我们发现问题，并提高产品的质量和性能。希望读者们在使用 Enzyme 时，能够深入理解这些方法背后的意义和实现，并利用它们来编写高质量和优秀的测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ed98d0bc9e1890c5e2288d