在编写 React 组件时，我们通常会使用异步请求来获取数据以及更新 UI。然而，在使用 Jest 进行单元测试时，我们有时会遇到一些异步请求方面的问题。在本文中，我们将探讨 Jest 测试 React 组件时遇到的异步请求问题及解决方式，并且会提供一些示例代码来帮助你更好地理解这些问题。
问题描述
当我们在 Jest 中测试 React 组件时，我们会发现一些异步请求可能会导致测试失败。例如，考虑下面这个很简单的组件：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ---------- -
----- ------- --------- - -------------
------------ -- -
---------------
-------------- -- ----------------
---------- -- ----------------
-- ----
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
------ ------- ---------在这个组件中，我们使用 useEffect hook 来获取用户列表，并将其保存在组件的状态中。然而，在测试中，我们想要验证组件是否正确地渲染用户列表。我们可以使用 Jest 和 React Testing Library 来编写这个测试：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ------ - ---- ------------------------- ------ -------- ---- ------------- ------------- ---- -- ------- -- -- - ---------------- ---- ----- --------------- - ------------------------- -------------------------------------------- ---
但是，当我们运行这个测试时，我们会发现它失败了：
Error: Unable to find an element with the role "list"
这是因为在测试运行时，组件还没有完成异步请求，因此它还没有渲染任何列表项。
解决方法
为了解决这个问题，我们需要告诉 Jest 等到组件完成异步请求再运行测试。我们可以使用 async 和 await 关键字来解决这个问题。为了实现这个功能，我们需要修改测试代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ------ - ---- ------------------------- ------ -------- ---- ------------- ------------- ---- -- ------- ----- -- -- - ---------------- ---- ----- --------------- - ----- -------------------------- -------------------------------------------- ---
在这个测试中，我们使用了一个异步断言 findByRole 来等待组件完成渲染。当组件完成异步请求并呈现列表时，该断言将被解决，然后我们可以进行进一步的断言。
示例代码
为了更好地理解上述解决方法，这里给出一些实际示例代码。
使用 waitFor 函数
除了使用 async 和 await 关键字来等待异步请求完成之外，我们还可以使用 waitFor 函数来实现相同的目的。下面是一个使用 waitFor 函数的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------- ------- - ---- -------------------------
------ -------- ---- -------------
------------- ---- -- ------- ----- -- -- -
---------------- ----
----- ---------- -- -
----- --------------- - ---------------------------
--------------------------------------------
---
---在这个示例中，我们使用 waitFor 函数来等待组件完成异步请求。该函数接受一个回调函数作为参数，该回调函数可以在异步请求完成后运行，并进行进一步的断言。
使用 Jest 提供的 done 函数
Jest 还提供了一个 done 函数，可以用来等待异步请求完成。下面是一个使用 done 函数的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ - ---- -------------------------
------ -------- ---- -------------
------------- ---- -- ------- ---- -- -
---------------- ----
------------- -- -
----- --------------- - ---------------------------
--------------------------------------------
-------
-- ------
---在这个示例中，我们使用了 setTimeout 函数来模拟异步请求。我们使用 screen 对象来查询组件是否呈现了列表，并使用 expect 断言来检查是否存在列表元素。最后，我们调用 done 函数来表示测试已经完成。
结论
在本文中，我们探讨了在 Jest 中测试 React 组件时遇到的异步请求问题。我们展示了如何使用 async/await、waitFor 函数和 done 函数等技术来解决这些问题，并提供了一些示例代码以帮助读者更好地理解这些技术。此外，学习这些技术也有助于我们写出更好的单元测试用例，进一步提高代码质量和代码可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748386a93696b0268eb247d