Enzyme 测试 React 组件中的异步状态的正确方式
Enzyme 是一个 React 专用的 JavaScript 测试实用工具库。它于 2015 年发布，由 Airbnb 公司提供支持。Enzyme 提供了一组 API，可以将 React 组件渲染到虚拟 DOM 中，并有效地查询、操纵和测试 DOM。
在 React 中，大多数应用程序涉及异步操作。例如，完整渲染架构的操作包括向服务端发出请求、等待响应、处理响应并在 DOM 中更新应用程序。因此，在编写 React 组件的测试过程中，需要考虑到异步操作的情况。本文将介绍如何使用 Enzyme 测试 React 组件中的异步状态。
测试异步状态
React 组件通常是状态驱动的。状态是通过 setState() 方法设置的。在测试 React 组件时，我们需要确保自己的测试是基于实际的状态，而不是理论上的状态。当我们测试组件中的异步状态时，特别是涉及到网络请求和数据获取的组件，我们需要确保测试在数据到达组件之前暂停一段时间。
例如，有如下组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- -------------- ------- --------- -
----- - -
----- -----
--
------------------- -
-------------------------------------- -- -
--------------- ----- ------------- ---
---
-
-------- -
----- - ---- - - -----------
------ -
-----
-----------------------
----- -- -
----
---------------- -- -
--- ------------------------------
---
-----
--
------
--
-
-
------ ------- ---------------该组件从服务端获取数据，然后将其组织为列表并在组件中呈现。
我们可以使用 Enzyme 测试该组件中的异步状态。如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----- ---- --------
------ -------------- ---- -------------------
-------------------
----- ------------- - -- -- --- ----------------- -- -----------------------
------------------------- ---- -- -- -
----------- ---- ---- ----- ----- -- -- -
----- ---- - -- --- -- ----- ------ -- - --- -- ----- ----- ---
----- -------- - - ---- --
--------------------------------------
----- ------- - --------------------- ----
------------------------------------------------------------
----- ----------------
-----------------
-------------------------------------------
--------------------------------------------------------
-------------------------------------------------------
---
---在上面的代码片段中，我们首先模拟了 axios 请求。我们使用 jest.spyOn() 来监听 axios.get() 方法并使用 mockResolvedValue 方法来处理服务端响应。
接下来，我们使用 mount() 方法将 AsyncComponent 组件挂载到虚拟 DOM 中。
然后，我们等待数据到达组件。这是通过调用 flushPromises() 来实现的。该方法返回一个 Promise，一旦解决，我们就可以断言得到由 API 返回的数据。
最后，我们使用 update() 方法来更新 wrapper 实例，以确保状态已正确更新。然后，我们可以断言组件是否已呈现正确的数据。
最佳实践
在测试 React 组件的异步操作时，我们需要遵循一些最佳实践。以下是一些可供参考的最佳实践：
使用模块化应用程序体系结构：应将异步请求分离为服务类或 API 类。这有助于确保异步数据获取的单独测试，并将其与视图组件完全分离。
为异步请求模拟数据：像我们在本文中所做的那样，应该为异步请求模拟数据。这样，我们就可以在不依赖外部服务的情况下测试应用程序。
确保测试与实际状态匹配：我们需要确保我们在测试期间使用的状态数据与我们在生产中使用的数据一致。这可以通过对模拟数据和实际数据的比较来实现。
结论
Enzyme 是一个非常强大和灵活的 JavaScript 测试实用工具库，专为 React 应用程序设计。在测试 React 组件中的异步操作时，我们需要一些额外的工作才能正确地测试组件的状态。本文介绍了 Enzyme 测试 React 组件中的异步状态的正确方式，并提供了一些为异步操作编写测试的最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675275b28bd460d3ad9483b5