Jest 是一款强大的 JavaScript 测试框架，它内置了许多功能强大的 API，可以测试异步代码、模拟函数和 Mock，以及 Mock 定时器。Mock 定时器允许我们模拟时间的流逝，从而测试我们代码的异步行为。
在本篇文章中，我们将详细介绍 Jest 中 Mock 定时器的使用方法，包括如何设置定时器、如何清除定时器以及如何测试定时器相关的代码。我们将针对不同场景，提供不同的示例代码和讲解。
设置定时器
在 Jest 中设置定时器很简单，只需要使用 Jest 提供的 jest.useFakeTimers() API 即可。
jest.useFakeTimers();
这将启用 Jest 的模拟定时器功能，从而使我们能够模拟定时器的行为。接下来，我们可以使用 setTimeout() 来设置定时器。
setTimeout(() => {
// do something
}, 1000);在正常情况下，setTimeout() 会在 1 秒后执行我们传入的回调函数。但是，在使用 jest.useFakeTimers() 后，Jest 会捕获所有定时器并将它们存放在一个队列中。我们可以使用 jest.runAllTimers() 来立即执行所有定时器。
jest.runAllTimers();
如果我们想跳过一定的时间，可以使用 jest.advanceTimersByTime()。
jest.advanceTimersByTime(3000);
这将使所有的定时器都跳过 3 秒。这对于测试定时器相关的代码非常有用。
清除定时器
在 Jest 中，我们也可以使用 clearTimeout() 来清除定时器。只需传入定时器的 ID 即可。
const timerId = setTimeout(() => {
// do something
}, 1000);
clearTimeout(timerId);在 Jest 中，为了方便测试，我们可以将所有的定时器 ID 存储在一个数组中，然后在测试结束后清除所有的定时器。
-- -------------------- ---- -------
----- ------ - ---
---------- ----------- -- -- -
----- ------- - ------------- -- -
-- -- ---------
-- ------
---------------------
-- -- ---- -----
---
------------ -- -
---------------------- -- -
----------------------
---
---这样，我们就可以确保在每个测试结束后都清除了所有的定时器。
测试定时器
在 Jest 中，有许多方法可以测试定时器相关的代码。下面是一些常用的测试方法和示例代码。
测试定时器被调用的次数
如果我们想测试定时器被调用的次数，可以使用 jest.useFakeTimers() 和 jest.advanceTimersByTime()。
test('test timer is called once', () => {
const callback = jest.fn();
setTimeout(callback, 1000);
jest.runOnlyPendingTimers();
expect(callback).toHaveBeenCalledTimes(1);
});在这个例子中，我们使用 jest.fn() 来创建一个 mock 函数，并将其传递给 setTimeout()。然后，我们使用 jest.runOnlyPendingTimers() 来驱动所有的定时器，并使用 expect() 来断言定时器的回调函数被调用了一次。
测试定时器的运行时间
如果我们想测试定时器的运行时间，可以使用 jest.useFakeTimers() 和 jest.advanceTimersByTime()。
-- -------------------- ---- ------- ---------- ----- ---- --- - -------- -- -- - ----- -------- - ---------- -------------------- ------ ------------------------------ ---------------------------------------- ------------------------------ ------------------------------------ ---
在这个例子中，我们使用 jest.fn() 来创建一个 mock 函数，并将其传递给 setTimeout()。然后，我们使用 jest.advanceTimersByTime() 来模拟定时器的时间流逝，并使用 expect() 来断言定时器的回调函数被调用了一次。
测试定时器的取消
如果我们想测试定时器取消的情况，可以使用 jest.useFakeTimers() 和 clearTimeout()。
-- -------------------- ---- ------- ---------- ----- --- -- ----------- -- -- - ----- -------- - ---------- ----- ------- - -------------------- ------ ---------------------- -------------------- ---------------------------------------- ---
在这个例子中，我们使用 jest.fn() 来创建一个 mock 函数，并将其传递给 setTimeout()。然后，我们使用 clearTimeout() 来清除定时器，并使用 jest.runAllTimers() 来驱动所有的定时器，并使用 expect() 来断言定时器的回调函数没有被调用。
结论
在 Jest 中 Mock 定时器非常简单，只需要使用 jest.useFakeTimers() 来启用 Jest 的模拟定时器功能，就可以轻松设置和测试定时器相关的代码。同时，清除定时器和测试定时器的方法也很简单，我们只需要使用 clearTimeout() 和一些 Jest API 就可以完成。
在测试中，模拟定时器非常有用，可以帮助我们测试异步代码的行为。通过本篇文章的介绍，相信大家对 Jest 中 Mock 定时器的使用方法有了更深入的了解，并可以更好的应用在自己的测试中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67764d7a6d66e0f9aa1e3cc5