问题描述
在使用 Enzyme 对 React 组件进行测试时，如果出现类似以下报错信息：
Error: Method “simulate” is meant to be run on 1 node. 0 found instead.
或者：
TypeError: Cannot read property 'addEventListener' of null
都表明找不到 DOM 节点，这种情况有可能是因为组件还没有被渲染出 DOM 树。
解决方案
- 使用
mount()方法
默认情况下，shallow() 方法只渲染组件的顶层元素，而不会渲染其子组件。如果你需要测试该组件的子组件，那么需要使用 mount() 方法，它会渲染出整个 DOM 树，这样就能获取到 DOM 节点了。
-- -------------------- ---- -------
------ - ----- - ---- ---------
----------------------- -- -- -
---------- ----- -------- -- -- -
----- ------- - ------------------ ----
----- ------ - -----------------------
-------------------------
------------
---
---- 使用
act()方法
act() 方法可以帮助我们解决一些由测试异步代码引起的问题，同时也可以让 React 组件在测试环境下表现得更像在浏览器环境下的行为。
-- -------------------- ---- -------
------ - --- - ---- -----------------------
------ - ----- - ---- ---------
----------------------- -- -- -
---------- ----- -------- -- -- -
----- ------- - ------------------ ----
----- ------ - -----------------------
------ -- -
-------------------------
---
------------
---
---- 使用
delay()方法
如果你在测试异步代码时遇到问题，可以使用 delay() 方法来让测试等待一段时间，直到数据或者 DOM 元素被渲染出来。
-- -------------------- ---- -------
------ - --- - ---- -----------------------
------ - ----- - ---- ---------
----------------------- -- -- -
---------- ------ ------ ----- -- -- -
----- ------- - ------------------ ----
----- --------- -- -- -
----- ----------- -- ---- ----- ----- ---- -- --------
-----------------
---
------------
---
---总结
在进行 React 组件测试时，我们需要测试组件在浏览器环境下的行为，而不仅仅是组件的实现细节。使用 Enzyme 框架可以帮助我们更方便地进行 React 组件的测试，但是遇到 DOM 节点找不到的问题，可以尝试使用 mount() 方法、act() 方法和 delay() 方法来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b8d5b48841e9894850885