Jest 是一款流行的 JavaScript 测试框架，它支持异步测试，可以测试异步代码的正确性。在前端开发中，异步代码是非常常见的，因此学会如何在 Jest 中进行异步测试是非常重要的。
Jest 中的异步测试
在 Jest 中，异步测试可以通过两种方式进行：回调函数和 Promise。
回调函数
在 Jest 中，使用回调函数进行异步测试的方式是将 done 参数传递给测试函数，并在测试完成时调用它。例如，下面的测试函数测试了一个异步函数 fetchData：
test('fetchData 返回正确的数据', (done) => { function callback(data) { expect(data).toEqual('Hello, World!'); done(); } fetchData(callback); });
在这个例子中，我们定义了一个回调函数 callback，并将它作为参数传递给 fetchData 函数。在回调函数中，我们使用断言函数 expect 来测试返回的数据是否等于 'Hello, World!'。最后，我们调用 done 函数来告诉 Jest 测试已经完成。
Promise
在 Jest 中，使用 Promise 进行异步测试的方式是返回一个 Promise 对象，并在 Promise 对象中执行测试。例如，下面的测试函数测试了一个异步函数 fetchData：
test('fetchData 返回正确的数据', () => { return fetchData().then((data) => { expect(data).toEqual('Hello, World!'); }); });
在这个例子中，我们返回了一个 Promise 对象，并在 Promise 对象中执行测试。在 Promise 对象的 then 方法中，我们使用断言函数 expect 来测试返回的数据是否等于 'Hello, World!'。
Jest 中的异步测试陷阱
在进行 Jest 中的异步测试时，有一些常见的陷阱需要注意。
忘记调用 done 函数
如果您使用回调函数进行异步测试，一定要记得在测试完成时调用 done 函数。如果您忘记了调用 done 函数，测试将不会完成，Jest 会一直等待测试完成，直到超时。
忘记返回 Promise 对象
如果您使用 Promise 进行异步测试，一定要记得返回一个 Promise 对象。如果您忘记了返回 Promise 对象，测试将不会完成，Jest 会一直等待测试完成，直到超时。
使用 setTimeout 函数
在进行异步测试时，有些开发者会使用 setTimeout 函数来模拟异步代码的执行时间。然而，这种方式并不可靠，因为异步代码的执行时间是不确定的。如果您使用 setTimeout 函数来模拟异步代码的执行时间，测试可能会在某些情况下失败。
Jest 中的异步测试最佳实践
在进行 Jest 中的异步测试时，有一些最佳实践可以帮助您避免常见的陷阱。
使用 async/await
在 Jest 中，使用 async/await 进行异步测试是最佳实践。async/await 是一种基于 Promise 的语法糖，可以让异步代码看起来像同步代码。例如，下面的测试函数使用 async/await 进行异步测试：
test('fetchData 返回正确的数据', async () => { const data = await fetchData(); expect(data).toEqual('Hello, World!'); });
在这个例子中，我们使用 async/await 语法糖来等待 fetchData 函数返回数据。在 fetchData 函数返回数据后，我们使用断言函数 expect 来测试返回的数据是否等于 'Hello, World!'。
使用 expect.assertions 函数
在进行异步测试时，有时候测试函数可能会在异步代码执行之前就结束了，这可能会导致测试失败。为了避免这种情况，我们可以使用 expect.assertions 函数来指定我们期望的断言数量。例如，下面的测试函数使用 expect.assertions 函数来指定我们期望的断言数量：
test('fetchData 返回正确的数据', async () => { expect.assertions(1); const data = await fetchData(); expect(data).toEqual('Hello, World!'); });
在这个例子中，我们使用 expect.assertions 函数来指定我们期望的断言数量为 1。如果测试函数没有执行任何断言，Jest 将会提示我们。
示例代码
下面是一个完整的示例代码，演示了如何在 Jest 中进行异步测试：
-- -------------------- ---- ------- -------- ------------------- - ------------- -- - ---------------- --------- -- ------ - --------------- --------- ------ -- - -------- -------------- - ---------------------------- --------- ------- - -------------------- --- -------- ------------------ - ------ --- ----------------- -- - ------------- -- - --------------- --------- -- ------ --- - ---------------------- --------- -- -- - ------ ------------------------------ -- - ---------------------------- --------- --- --- ---------------------- --------- ----- -- -- - --------------------- ----- ---- - ----- ------------------- ---------------------------- --------- ---展开代码
在这个示例代码中，我们定义了两个异步函数 fetchData 和 fetchDataPromise。fetchData 函数使用回调函数进行异步测试，fetchDataPromise 函数使用 Promise 进行异步测试。我们还定义了三个测试函数，分别测试了 fetchData 函数和 fetchDataPromise 函数的正确性。第一个测试函数使用回调函数进行异步测试，第二个测试函数使用 Promise 进行异步测试，第三个测试函数使用 async/await 和 expect.assertions 函数进行异步测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cc4b4be46428fe9e56fc98
