在前端开发中，我们经常需要使用 Jest 进行测试。而在测试中，处理异步代码是一件很常见的事情。其中，setTimeout 函数是一个非常常用的异步函数。本文将介绍 Jest 怎么正确地测试涉及 setTimeout 函数的异步代码。
setTimeout 函数和异步测试
setTimeout 函数是 JavaScript 中的一个常用函数，它用于创建一个在指定时间后执行的函数。它接收两个参数：一个是要执行的函数，另一个是延迟时间。当我们需要测试一个异步函数时，就会用到 setTimeout 函数。
在 Jest 中，测试异步代码需要加上一个 done 回调函数。这个函数告诉测试框架，在异步操作执行完毕之前不要标记测试为已经完成。一旦异步操作执行完毕，我们就可以通过调用 done 函数来告诉测试框架测试已经完成了。
以下是一个使用了 setTimeout 函数的异步代码的测试示例：
it("should call callback after 100ms", done => {
function callback() {
done();
}
setTimeout(callback, 100);
});在上面的测试中，我们使用了 setTimeout 函数来模拟一个异步操作。回调函数中调用了 done 函数，表示测试已经完成了。当在指定时间（100ms）后，setTimeout 函数中的回调函数被执行，测试就会被标记为已经完成了。
然而，上述代码的问题在于如果回调函数没有被调用或者被调用得太晚，测试就会失败。为了避免这种问题，我们需要使用 Jest 提供的 setTimeout 和 jest.runAllTimers 函数。
正确使用 setTimeout 和 jest.runAllTimers
在 Jest 中，测试异步代码的标准做法是使用 setTimeout 和 jest.runAllTimers 这两个函数。首先，我们需要使用 Jest 提供的 fakeTimer API 模拟一个定时器。然后，我们就可以在测试中使用 jest.runAllTimers 函数来主动触发定时器的回调函数。这样，我们就不需要等待真实的时间流逝。
以下是一个使用 Jest 提供的 setTimeout 和 jest.runAllTimers 函数的测试示例：
it("should call callback after 100ms", () => {
function callback() {
expect(true).toBe(true);
}
jest.useFakeTimers();
setTimeout(callback, 100);
jest.runAllTimers();
});在上面的测试中，我们首先使用 Jest 提供的 fakeTimer API 模拟一个定时器。然后，我们使用 setTimeout 函数来执行回调函数。接着，我们使用 jest.runAllTimers 函数触发所有定时器的回调函数。最后，我们通过调用 expect 函数来测试回调函数中的某些行为。
总结
本文介绍了 Jest 测试涉及 setTimeout 函数的异步代码的正确方法。首先，我们需要在测试中使用 done 回调函数来告诉测试框架异步操作已经完成了。然而，这种方法会导致测试容易失败。因此，我们需要使用 Jest 提供的 setTimeout 和 jest.runAllTimers 函数来测试异步代码。这样，我们就可以在测试中主动触发定时器的回调函数，避免测试失败的情况。
现在，我们已经知道如何正确地测试涉及 setTimeout 函数的异步代码了。在实际开发中，我们需要时刻牢记这些方法，以确保我们的测试代码能够正确地运行。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a548c0add4f0e0ffdc7808