前端开发中，测试是十分重要的环节。在 React 应用开发中，React 官方出品的测试工具 Enzyme 深受开发者喜爱。Enzyme 不仅支持 React 组件的测试，还提供了丰富的 API，使测试变得更加容易高效。其中，find 方法是 Enzyme API 中十分重要的一个方法，本文就详细介绍这一方法及其在 React 测试中的应用。
什么是 Enzyme
Enzyme 是 React 官方出品的测试工具，是一个开源 JavaScript 工具库，用于方便地测试 React 组件。Enzyme 提供了三种渲染方式：shallow、mount、render。shallow 是一种浅渲染方式，只渲染当前组件，不渲染其子组件。mount 是一种深度渲染方式，会渲染整个组件树，由于会渲染子组件，因此速度较慢。render 也是一种深度渲染方式，但是与 mount 不同，它不需要 DOM 环境，只是将元素渲染为静态 HTML。
find 方法的作用
find 方法用于在 Enzyme 渲染结果中查找元素并返回一个新的 Enzyme 对象。这个方法可以在 shallow、mount、render 三种渲染方式中使用。
find 方法的语法
find 方法语法为：wrapper.find(selector)
其中，selector 参数可以是 CSS 选择器、React 组件的 displayName、React 组件的类型（class 或 function），也可以是 React 组件的 props 中的一个字段。
下面是默认使用的 wrapper，即通过 shallow 方法得到的 enzyme 对象的基本代码。
-- -------------------- ---- ------- ------ ------- - ------- - ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- --- ----- ----------- - -- -- - ----- ------- -------------------- --------- -- -- ----------------------- ------- ----------- ------ -- ----- ------- - -------------------- ----展开代码
在 wrapper 中使用 find 方法，可以根据选择器查找包含该选择器的组件。
const button = wrapper.find('.click-me'); // 找到包含 .click-me 类名的组件
还可以根据组件的 displayName 查找组件，如下所示。
const button = wrapper.find('Button'); // 找到 displayName 为 Button 的组件
也可以通过组件类型（class 或 function）查找组件。
const MyButton = ({ text, onClick }) => ( <button className="click-me" onClick={ onClick }>{ text }</button> ); const wrapper = shallow(<MyButton text="click me" onClick={ () => console.log('clicked!') } />); const button = wrapper.find(MyButton); // 找到组件类型为 MyButton 的组件
另外，还可以根据传入组件的 props 中的一个字段查找组件。
const MyButton = ({ text }) => ( <button className="click-me">{ text }</button> ); const wrapper = shallow(<MyButton text="click me" />); const button = wrapper.find({ text: 'click me' }); // 根据 props 中的 text 字段查找组件
find 方法的返回值
find 方法返回一个新的 Enzyme 对象，该对象包含查找到的元素。如果没有查找到任何元素，返回一个新的 Enzyme 对象，该对象中没有任何元素。
在 React 测试中使用 find 方法
当我们在测试 React 组件时，可以根据组件的结构、属性、状态等信息，使用 find 方法查找组件中的子组件或某个元素。
以下是一个简单的例子，其中包含了一个包含两个按钮的组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------- - -- -- - ----- ------- -------------------------- ---------- ------- -------------------------- ---------- ------ -- ------ ------- --------展开代码
我们可以使用 Enzyme 的 shallow 方法渲染 Buttons 组件，并使用 find 方法查找包含指定 className 的元素。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ------- ---- ------------ ----------------- ----------- -- -- - ---------- ------ --- --------- -- -- - ----- ------- - ---------------- ---- ----- ------- - ------------------------- ----- ------- - ------------------------- ---------------------------------- ---------------------------------- --- ---展开代码
通过这种方式，我们可以在测试中对 Buttons 组件的结构进行断言，对组件的渲染结果进行测试。
除了对按钮的结构进行断言，我们还可以对按钮的类名、文本内容、点击事件等进行测试。对于文本内容及其他属性的测试，可以使用 props 查询的方式，如下所示。
-- -------------------- ---- ------- ---------- - ------ ---- ---- ------ --- -- -- - ----- ------- - ---------------- ---- ----- ------- - -------------- --------- ------- -- --- ---------------------------------- --- ---------- - ------ ------- ------- --- ---- --------- -- -- - ----- ------- - ---------------- ---- ----- ------- - ------------------------- -------------------------- ---展开代码
小结
find 方法是 Enzyme 中功能强大的 API 之一，在 React 测试中可以方便地遍历渲染结果，查找需要测试的元素或组件。使用 find 方法，我们可以根据组件的结构、属性、状态等信息进行测试，断言组件的渲染结果是否符合预期。在 React 应用开发中，Enzyme 可以作为组件测试的重要工具，并辅助我们开发出质量更高的 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c425596e1fc40e36d00f80
