在前端开发中，异步函数是非常常见的，但是如何测试异步函数却是一个挑战。Jest 是一个流行的 JavaScript 测试框架，它提供了一系列的工具来测试异步函数。在本文中，我们将学习如何在 Jest 中测试异步函数。
Jest 中的异步测试
在 Jest 中，我们可以使用 test 或 it 函数来定义一个测试用例。Jest 提供了两种测试异步函数的方式：回调函数和 Promise。
回调函数
在 Jest 中测试异步函数的一种方式是使用回调函数。我们可以使用 Jest 提供的 done 参数来通知 Jest 测试已经完成。下面是一个例子：
-- -------------------- ---- -------
-------- ------------------- -
------------- -- -
-----------------
-- ------
-
--------------- ------- ------ ---- -- -
-------------- -- -
--------------------------
-------
---
---在这个例子中，我们定义了一个 fetchData 异步函数，它会在 1 秒钟后返回一个数据。我们使用 Jest 的 test 函数来定义一个测试用例，测试 fetchData 函数是否返回正确的数据。我们传递一个回调函数 done，当测试完成时调用它通知 Jest。
Promise
另一种测试异步函数的方式是使用 Promise。我们可以使用 Jest 提供的 expect 函数和 resolves 或 rejects 匹配器来测试 Promise 是否返回正确的结果。下面是一个例子：
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
------------- -- -
----------------
-- ------
---
-
--------------- ------- ------ -- -- -
------ ------------------------------------------
---在这个例子中，我们定义了一个 fetchData 异步函数，它返回一个 Promise，在 1 秒钟后解决并返回一个数据。我们使用 Jest 的 test 函数来定义一个测试用例，测试 fetchData 函数是否返回正确的数据。我们使用 expect 函数和 resolves 匹配器来测试 Promise 是否返回正确的结果。
常见问题
在测试异步函数时，我们可能会遇到一些常见问题。下面是一些解决这些问题的方法：
超时
如果测试用例超过默认的 5 秒钟还没有完成，Jest 将会抛出一个超时错误。我们可以使用 timeout 参数来增加超时时间。例如：
test('fetchData returns data', () => {
return expect(fetchData()).resolves.toBe('data');
}, 10000);在这个例子中，我们将超时时间设置为 10 秒钟。
多个异步函数
如果测试用例中有多个异步函数，我们可以使用 async 和 await 来等待所有异步函数完成。例如：
-- -------------------- ---- ------- ----- -------- -------------- - ----- ----- - ----- ------------- ----- ----- - ----- ------------- ------ ------- ------- - ------------------ ------- --- ------ ----- -- -- - ----- ---- - ----- --------------- ------------------------------ ---------- ---
在这个例子中，我们定义了一个 fetchAllData 异步函数，它会等待两个异步函数 fetchData1 和 fetchData2 完成，并返回它们的结果。我们使用 async 和 await 来等待 fetchAllData 函数完成，并使用 toEqual 匹配器来测试返回的结果是否正确。
结论
在本文中，我们学习了如何在 Jest 中测试异步函数。我们可以使用回调函数或 Promise 来测试异步函数，并解决一些常见的问题。测试是开发的重要组成部分，它可以帮助我们确保代码的正确性和可靠性。通过学习 Jest 中的异步测试，我们可以更好地测试异步函数，提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675646383af3f99efe59e84c