什么是 Enzyme？
Enzyme 是一个由 Airbnb 开源的 React 测试工具，它提供了一套简单而强大的 API，可以让你方便地测试 React 组件的行为和渲染结果。
Enzyme 中的 shallow 渲染和 mount 渲染
在 Enzyme 中，有两种常用的渲染方式：shallow 渲染和 mount 渲染。它们之间有什么区别呢？
shallow 渲染
shallow 渲染是指只渲染组件本身，不会渲染组件内部的子组件。shallow 渲染可以用来测试组件的行为，比如事件处理、状态更新等，而不需要考虑子组件的影响。
shallow 渲染的 API 是 shallow()，它返回一个 ShallowWrapper 对象。ShallowWrapper 对象是一个轻量级的包装器，可以方便地访问组件的属性、状态和事件处理函数等信息。
下面是一个使用 shallow 渲染测试组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----- ------- -- -- -
----- ------- - -------------------- ----
----- ------ - -----------------------
-------------------------
--------------------------------------------
---
---在这个例子中，我们使用 shallow() 渲染了 MyComponent 组件，并查找了其中的 button 元素。然后，我们模拟了 click 事件，并断言了组件的状态是否正确更新。
mount 渲染
mount 渲染是指渲染组件及其子组件，可以测试组件在真实环境中的行为，比如 DOM 操作、生命周期等。mount 渲染会真实地挂载组件到 DOM 树中，因此速度比 shallow 渲染慢，但可以测试更全面的场景。
mount 渲染的 API 是 mount()，它返回一个 ReactWrapper 对象。ReactWrapper 对象是一个完整的包装器，可以访问组件及其子组件的属性、状态和事件处理函数等信息。
下面是一个使用 mount 渲染测试组件的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----- ----------- -- -- -
----- ------- - ------------------ ----
------------------------------------------------------
---
---在这个例子中，我们使用 mount() 渲染了 MyComponent 组件，并查找了其中的 ChildComponent 子组件。然后，我们断言了子组件是否正确地渲染出来了。
如何选择渲染方式？
在选择渲染方式时，我们需要考虑测试的目的和场景。如果只是测试组件的行为，比如事件处理、状态更新等，那么使用 shallow 渲染即可。如果需要测试组件在真实环境中的行为，比如 DOM 操作、生命周期等，那么使用 mount 渲染。
需要注意的是，mount 渲染会真实地挂载组件到 DOM 树中，因此测试用例之间可能会相互影响。为了避免这种情况，可以使用 beforeEach() 和 afterEach() 等钩子函数来清理测试环境。
总结
Enzyme 是一个非常强大的 React 测试工具，它提供了两种常用的渲染方式：shallow 渲染和 mount 渲染。shallow 渲染只渲染组件本身，适合测试组件的行为；mount 渲染渲染组件及其子组件，适合测试组件在真实环境中的行为。在选择渲染方式时，需要考虑测试的目的和场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510a3a095b1f8cacd918995