在前端开发中，Enzyme 是一个流行的测试工具，它可以帮助我们测试 React 组件的行为和输出。其中，find 方法可以用于查找组件的子元素。但是，有时候我们可能会遇到 find 方法返回 undefined 的问题，这时候该怎么办呢？本文将介绍如何解决这个问题。
问题描述
当我们在测试中使用 Enzyme 的 find 方法时，有时候会遇到返回 undefined 的情况。例如，在下面的代码中，我们想要查找 id 为 "myButton" 的按钮组件：
-- -------------------- ---- -------
------ - ------- - ---- ---------
----------------------- -- -- -
---------- ---- --- ------ --------- -- -- -
----- ------- - -------------------- ----
----- ------ - --------------------------
-----------------------------------
---
---但是，当我们运行测试时，会发现 button 的值为 undefined，导致测试失败。
原因分析
造成这个问题的原因是，Enzyme 的 find 方法使用了 React 的内部实现来查找组件。具体来说，它使用了 React 的 ReactDOM.findDOMNode 方法。但是，这个方法在 React 16 中被标记为过时，因为它可能会导致不必要的重新渲染。因此，在 React 16 中，如果我们在组件的 render 方法中使用了 ref，那么 ReactDOM.findDOMNode 方法将返回 null。
在 Enzyme 中，如果 find 方法返回 null，它会将其转换为 undefined。因此，我们会看到上面的测试代码中，button 的值为 undefined。
解决方案
为了解决这个问题，我们需要使用 Enzyme 的另一个方法 findWhere。和 find 方法不同，findWhere 方法使用了组件的 props 和 state 来查找子元素，而不是使用 ReactDOM.findDOMNode 方法。因此，它不会受到 React 16 中的限制。
下面是使用 findWhere 方法来查找 id 为 "myButton" 的按钮组件的示例代码：
-- -------------------- ---- -------
------ - ------- - ---- ---------
----------------------- -- -- -
---------- ---- --- ------ --------- -- -- -
----- ------- - -------------------- ----
----- ------ - ---------------------- -- --------------- --- ------------
-----------------------------------
---
---在上面的代码中，我们传递了一个函数给 findWhere 方法，这个函数用于判断每个子节点是否符合条件。在这个例子中，我们判断每个子节点的 id 属性是否等于 "myButton"。
结论
Enzyme 是一个非常有用的测试工具，但是在使用它的 find 方法时，我们需要注意 React 16 中的限制。如果我们遇到了返回 undefined 的情况，可以尝试使用 Enzyme 的 findWhere 方法来解决这个问题。同时，我们也需要注意组件的 props 和 state，以便正确地查找子元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675916f062956301acd58ab8