在 React 中,组件的生命周期非常重要,因为它们可以让我们在特定的时间点执行特定的操作。Enzyme 是一个流行的 React 测试工具,它提供了一些工具来测试组件的生命周期,包括挂载时期和卸载时期。
挂载时期
当一个组件被渲染到 DOM 中时,它进入了挂载时期。在这个时期,组件执行一些初始化操作,例如设置默认状态和绑定事件处理程序。
Enzyme 提供了一些方法来测试组件的挂载时期。其中,最常用的方法是 shallow()。这个方法会渲染组件的浅层副本,并返回一个包含组件实例的 ShallowWrapper 对象。我们可以使用这个对象来测试组件的挂载时期。
下面是一个示例代码:
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ------- -------- -- ------- -- -- -
----- ------- - -------------------- ----
-----------------------------------------------------
---
---------- ---------- ----- ----------- -- -- -
----- ------- - -------------------- ----
---------------------------------------
---
---------- ---- --- ----- ----- --------- -- -- -
----- ------- - -------------------- ----
----- -------- - -------------------
----- --- - -------------------- ---------------
-----------------------
-----------------------------------------
-------------------------------
---
---在这个示例代码中,我们测试了 MyComponent 组件的三个方面:
- 是否可以正常渲染;
- 是否正确初始化了状态;
- 是否正确绑定了点击事件处理程序。
我们使用 shallow() 方法来获取组件的浅层副本,并使用 ShallowWrapper 对象来测试组件的状态和事件处理程序。
卸载时期
当一个组件从 DOM 中卸载时,它进入了卸载时期。在这个时期,组件执行一些清理操作,例如取消事件绑定和清除定时器。
Enzyme 也提供了一些方法来测试组件的卸载时期。其中,最常用的方法是 unmount()。这个方法会卸载组件,并返回一个包含组件实例的 ShallowWrapper 对象。我们可以使用这个对象来测试组件的卸载时期。
下面是一个示例代码:
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------- ------- -------- -- ------- -- -- -
----- ------- - -------------------- ----
-----------------------------------------------------
------------------
-----------------------------------------------------
---
---------- ----- --- -------- -- --------- -- -- -
---------------------
----- ------- - -------------------- ----
---------------------------------------------
------------------
-----------------------------------------------
---------------------
---
---在这个示例代码中,我们测试了 MyComponent 组件的两个方面:
- 是否可以正常卸载;
- 是否正确清除了定时器。
我们使用 shallow() 方法来获取组件的浅层副本,并使用 ShallowWrapper 对象来测试组件的卸载时期。我们还使用了 Jest 的 useFakeTimers() 和 useRealTimers() 方法来模拟和恢复定时器。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d4dd06a941bf7134915b35