Enzyme 中 find() 和 findWhere() 的区别及使用

在前端开发中，我们经常需要对页面中的元素进行操作，而 Enzyme 是 React 的一个测试工具库，可以帮助开发者更方便地进行页面元素操作和测试。在 Enzyme 中，find() 和 findWhere() 是两个常用的方法。本文将会介绍这两个方法的区别及使用方法。

find() 方法

find() 方法用于在当前选定的元素集合中查找符合指定的 CSS 选择器的子元素。该方法返回的是一个新的 Enzyme 实例，可以继续进行操作。

使用方法

wrapper.find(selector)

参数说明：

• selector：字符串类型，表示需要查找的 CSS 选择器。

示例代码

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = shallow(<MyComponent />);
const spanWrapper = wrapper.find('span');

在上面的示例代码中，我们使用 shallow() 方法创建了一个 MyComponent 的 shallow 实例，然后通过 find() 方法查找其中的 span 元素，返回的是一个新的 Enzyme 实例 spanWrapper。

findWhere() 方法

findWhere() 方法用于在当前选定的元素集合中查找与指定的函数参数返回 true 的子元素。该方法返回的是一个新的 Enzyme 实例，可以继续进行操作。

使用方法

wrapper.findWhere(predicate)

参数说明：

• predicate：函数类型，用于判断选中的元素是否符合条件。

示例代码

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

const wrapper = mount(<MyComponent />);
const inputWrapper = wrapper.findWhere((node) => node.type() === 'input');

在上面的示例代码中，我们使用 mount() 方法创建了一个 MyComponent 的 mount 实例，然后通过 findWhere() 方法查找其中类型为 input 的元素，返回的是一个新的 Enzyme 实例 inputWrapper。

区别及注意事项

从使用角度来看，find() 方法更加适用于通过 CSS 选择器查找元素，可以直接使用 CSS 的类、属性、伪类等作为选择器；而 findWhere() 方法更加灵活，针对性更强，可以通过传递判断函数的方式进行查找元素。

需要注意的是，在使用 findWhere() 方法查找元素时，我们需要传递一个函数作为参数，该函数的返回值需要是布尔类型；同时，在该函数中我们可以使用 Enzyme 实例的 API，如 type()、prop()、text()等来获取元素的类型、属性、文本等信息。

结论

• find() 方法用于通过 CSS 选择器查找元素。
• findWhere() 方法用于通过传递判断函数的方式查找元素。
• 在使用 findWhere() 方法时，需要传递一个返回布尔类型的函数作为参数。
• 在判断函数中，可以使用 Enzyme 实例的 API 来获取元素的信息。

总结

Enzyme 是 React 的一个测试工具库，使用起来非常方便。本文重点讲解了 Enzyme 中 find() 和 findWhere() 两个方法的区别及使用方法，希望对读者加深理解 Enzyme 的操作有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460bb47968c7c53b025d394