在 React 前端开发中，Enzyme 可以用于测试 React 组件的行为和功能。但是，有时当我们使用 find() 方法来查找组件时会出现 find() returned 0 nodes 的错误提示，意味着找不到目标组件。
这种情况下，需要考虑一些可能的原因并采取相应措施解决。
原因分析
- 组件命名问题：可能是由于组件命名错误、大小写不符，或者组件被包裹在 HOC 中导致测试代码无法找到组件。此时需要确保在测试代码中使用正确的组件名称。
- 节点渲染顺序问题：如果组件还没有完全地渲染完成，
find()方法是无法找到它的。这时可以等待组件渲染完成后再执行find()方法。 - 节点选择器问题：如果使用了错误的 CSS 选择器语法，或者使用的属性名和值不匹配的话，也会导致
find()方法找不到组件。
解决方案
- 如果出现组件命名问题，重命名或修改组件的导出方式，
-- -------------------- ---- -------
-- ------ -
----- - - -- -- -
------ ---- --------------- ----------------
-
------ ------- --
-- ---- - -----
----------- ----------- -- -- -
----------- ----------- -- -- -
----- ------- - ---------- ----
------------------------------------------- -- --- -- ---- ---------------
---
---- 如果存在节点渲染顺序问题，可以等待一段时间后再使用
find()方法。
-- -------------------- ---- -------
---------- ------ --- --------- ----- -------- ------ ------ -- -
----- ------- - ----------------------------------- ----
------------- -- -
-----------------
---------------------------------------------------------
-------
-- ------ -- -- - -
--- 若要在组件中使用类名选择器，请确保正确地添加了
.className前缀，否则可能会引发未知错误。以下是常见的例子：
-- -------------------- ---- ------- ---------- ------ --- ------ -- ----- -- ---- ------ -- -- - ----- ------- - -------------------------------- ---- -- --- ----- ---- ---- --- ----- -------- - --------------------------- --------------------------- ---------------------------------------------------------------------- --
总结
通过深入分析和解决 Enzyme 中 find() returned 0 nodes 错误出现的原因，我们可以提高调试能力，并且更好地应用 Enzyme 来测试 React 组件。鉴于这个问题非常具有代表性，建议在进行大规模的组件测试前先熟悉这些解决方案。
完整代码范例 GitHub 链接： Enzyme-find-0-nodes。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651790eb95b1f8cacdfbef5a