Enzyme 测试中的 “wrapper.find” 方法使用教程
Enzyme 是 React 的测试工具之一，它可以帮助开发者编写高效且可靠的 React 组件测试。其中，wrapper.find 是 Enzyme 中很常用的一种方法，可以用来查找渲染后的组件中的特定节点。
本文将介绍 wrapper.find 的使用教程，包括一些常见的语法用法以及代码示例，以帮助读者更好地使用 Enzyme 编写测试。
- wrapper.find 方法简介
wrapper.find 是 Enzyme 的一种方法，用于在渲染后的组件中查找特定的节点。该方法使用 CSS 选择器来搜索符合条件的节点，它返回一个 Enzyme Wrapper 对象，该对象包含搜索到的节点。
- 方法语法
wrapper.find 方法的语法很简单，只需要在 Enzyme 对象后面添加 .find() 就可以了。
下面是 wrapper.find 方法的基本语法：
wrapper.find(selector)
其中，selector 是一个 CSS 选择器，它表示需要查找的节点的标识符，可以是标签名、类名、ID 等。
- 查找方法示例
下面我们来看一些常见的 wrapper.find 查找方法示例：
3.1 查找标签名为 div 的节点
wrapper.find('div')
3.2 查找属性名为 className，且属性值为'container'的节点
wrapper.find('[className="container"]')
3.3 查找属性名为 id，且属性值为'myInput'的节点
wrapper.find('#myInput')
- 常用 API
wrapper.find 方法还支持一些常用的 API，如下所示：
4.1 .at() 方法
通过 .at() 方法可以返回 wrapper 对象中指定位置的节点。例如：
const wrapper = shallow(<mycomponent>); const secondNode = wrapper.find('div').at(1);
上面代码中，我们首先渲染了组件 MyComponent，并使用 wrapper.find 方法找到了所有的 div 节点，然后使用 .at(1) 方法获取了第二个 div 节点。
4.2 .first() 和 .last() 方法
通过 .first() 和 .last() 方法可以分别获取 wrapper 对象中的第一个和最后一个节点。例如：
const wrapper = shallow(<mycomponent>); const firstNode = wrapper.find('div').first(); const lastNode = wrapper.find('div').last();
4.3 .filter() 方法
通过 .filter() 方法可以筛选出 wrapper 对象中满足条件的节点。例如：
const wrapper = shallow(<mycomponent>); const filteredNodes = wrapper.find('div').filter('[className="container"]');
上面代码中，我们首先渲染了组件 MyComponent，然后使用 wrapper.find 方法查找所有的 div 节点，并使用 .filter() 方法筛选出了所有属性名为 className，且属性值为'container'的节点。
- 总结
本文介绍了 Enzyme 中 wrapper.find 方法的使用教程，包括方法语法、查找方法示例以及常用 API。在编写 React 组件测试时，我们可以通过 wrapper.find 方法根据需要找到渲染后组件中的特定节点，然后进一步进行测试。同时，我们需要注意 selector 填写的是 CSS 选择器，需要根据实际情况进行调整。
参考代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
----------------------- -- -- -
---------- -- ------- -- -- -
----- ------- - -------------------- ----
----- ------------- - ------------------------------------------------------
----------------------------------------
---
------- ----- ------ -- -- -
----- ------- - -------------------- ----
----- --------- - ----------------------------
------------------------------------------------------
---
------- ------ ------ -- -- -
----- ------- - -------------------- ----
----- ---------- - --------------------------
--------------------------------------------------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664c190bd3423812e4aebf89