在编写前端代码时，经常需要测试一些异步操作，比如网络请求、定时器等。Jest 是一个流行的前端测试框架，它提供了多种方法测试异步代码。在本文中，我们将详细介绍 Jest 中测试异步代码的方法。
callback
一个常用的测试异步代码的方法是使用回调函数。在 Jest 中，我们可以使用 test 函数和 done 参数来实现这个目的。下面是一个使用回调函数测试异步代码的示例：
-- -------------------- ---- ------- -------------- ------ ------ -- - -------- ------------------- - ------------- -- - ------------------- -- ------ - ---------------- -- - ------------------------------ ------- --- ---展开代码
在这个示例中，我们使用了 setTimeout 函数模拟异步操作，并在回调函数中返回了一个结果。在测试函数中，我们先调用测试的异步函数 fetchData，并在回调函数中使用了 Jest 提供的 expect 函数来测试结果是否符合预期。当测试完成后，我们调用 done 函数来表示测试已经结束。
Promise
另一个常用的测试异步代码的方法是使用 Promise。在 Jest 中，我们可以使用 test 函数和 then 方法来实现这个目的。下面是一个使用 Promise 测试异步代码的示例：
-- -------------------- ---- ------- ------------- ------ -- -- - -------- ----------- - ------ --- ----------------- ------- -- - ------------- -- - ------------------ -- ------ --- - ------ ----------------------- -- - ------------------------------ --- ---展开代码
在这个示例中，我们也使用了 setTimeout 函数模拟异步操作，并在 Promise 中返回了一个结果。在测试函数中，我们先调用测试的异步函数 fetchData，并在 then 方法中使用了 Jest 提供的 expect 函数来测试结果是否符合预期。
async/await
除了 Promise，ES6 还引入了 async/await 语法糖来解决 JavaScript 中回调地狱的问题。在 Jest 中，我们也可以使用 async/await 来测试异步代码。下面是一个使用 async/await 测试异步代码的示例：
-- -------------------- ---- ------- ----------------- ------ ----- -- -- - -------- ----------- - ------ --- ----------------- ------- -- - ------------- -- - ------------------ -- ------ --- - ----- ------ - ----- ------------ ------------------------------ ---展开代码
在这个示例中，我们仍然使用了 Promise 模拟异步操作，并在 async 函数中使用了 await 来等待异步代码执行完毕。在测试函数中，仍然使用 Jest 提供的 expect 函数来测试结果是否符合预期。
Mock
在测试异步代码时，经常需要模拟一些外部依赖，比如网络请求、定时器等。在 Jest 中，我们可以使用 Mock 来模拟这些依赖。下面是一个使用 Mock 测试异步代码的示例：
-- -------------------- ---- ------- ---------- ------ ----- -- -- - -------- -------------- - ------ ------------------- -- ------------ - ------------ - ---------- -- ----------------- ----- -- -- -------- ---- ----- ------ - ----- ------------------------------------- --------------------------------------------------------------------- ------------------------------ ---展开代码
在这个示例中，我们使用了 fetch 函数发起了一个网络请求，并在回调函数中返回了一个结果。我们使用了 global.fetch 和 jest.fn 来模拟 fetch 函数，以便测试异步操作是否正确。在测试函数中，我们调用 fetchData 来发起网络请求，并使用 Jest 提供的 expect 函数来测试结果是否符合预期。
总结
在 Jest 中测试异步代码有多种方法，包括 callback、Promise、async/await 和 Mock 等。开发人员可以根据实际情况选择适合自己的方法。使用这些方法可以有效地测试异步代码，并提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0cdde83d39b4881526ea1
