Enzyme 是 React 组件测试工具中非常流行的一个库，它提供了一系列 API，帮助我们方便地测试 React 组件的行为和状态。在测试 React 组件时，我们经常需要模拟异步请求和延迟加载的场景，本文将介绍如何使用 Enzyme 来实现这些功能。
模拟异步请求
在 React 组件中，我们经常会使用异步请求来获取数据或者更新组件状态。在测试组件时，我们需要模拟这些异步请求，以便测试我们的组件在不同的数据状态下的行为。
Enzyme 提供了 mount 和 shallow 两个 API 来渲染组件，我们可以使用这些 API 来模拟异步请求。例如，我们可以使用 jest.mock 来模拟一个异步请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
------ --- ---- --------
-------------------
----------------------- -- -- -
---------- ------ ---- ---- ---- ----- ----- -- -- -
----- ---- - - ----- ------ --
------------------------------------
----- ------- - ------------------ ----
----- ------------------ -- --------
------------------------------------------------- ----------------
---
---在上面的例子中，我们使用 jest.mock 来模拟 ./api 模块，然后使用 mockResolvedValue 方法来模拟异步请求返回的数据。接着，我们使用 mount 方法来渲染 MyComponent 组件，并使用 await 等待异步请求完成，最后断言组件渲染后的结果是否符合预期。
模拟延迟加载
有些组件在渲染时需要进行延迟加载，例如图片懒加载、分页加载等等。在测试这些组件时，我们需要模拟延迟加载的场景，以便测试组件在加载过程中的行为。
Enzyme 提供了 mount 和 shallow 两个 API 来渲染组件，我们可以使用这些 API 来模拟延迟加载。例如，我们可以使用 setTimeout 来模拟一个延迟加载的场景：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ---- ---- ------ ------- ----- -- -- -
----- ------- - ------------------ ----
-------------------------------------------------------------------
----- --- --------------- -- ------------------- ------- -- ------
-------------------------------------------------------------
---
---在上面的例子中，我们使用 mount 方法来渲染 MyComponent 组件，并断言组件渲染后的 img 元素的 src 属性是否为 placeholder.jpg。接着，我们使用 setTimeout 来模拟延迟加载，等待一定时间后再断言 img 元素的 src 属性是否为 image.jpg。
总结
在测试 React 组件时，我们经常需要模拟异步请求和延迟加载的场景。Enzyme 提供了 mount 和 shallow 两个 API，可以帮助我们方便地模拟这些场景。在模拟异步请求时，我们可以使用 jest.mock 来模拟异步请求的模块，然后使用 mockResolvedValue 方法来模拟异步请求返回的数据。在模拟延迟加载时，我们可以使用 setTimeout 来模拟延迟加载的场景。掌握这些技巧可以帮助我们更好地测试 React 组件的行为和状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6579623fd2f5e1655d369b75