在前端开发中，我们经常会使用定时器函数来实现一些功能，例如定时轮询、定时刷新等。但是，在进行单元测试时，这些定时器函数会带来一些麻烦。因为它们会影响测试的结果，例如测试结果会因为定时器的延迟而导致测试失败。因此，我们需要使用 Jest 提供的 mock 功能来 mock 掉定时器函数，以便更好地进行单元测试。
Jest 的 Timer Mock
Jest 提供了一组用于 mock 掉定时器函数的 API，包括 jest.useFakeTimers()、jest.runAllTimers()、jest.advanceTimersByTime() 等。这些 API 可以让我们在测试中模拟定时器函数的行为，例如模拟延迟、模拟重复执行等。
jest.useFakeTimers()
jest.useFakeTimers() 函数可以让 Jest 在测试中使用 fake 定时器，以便我们可以控制定时器函数的执行。该函数需要在测试文件中的 beforeEach() 或 beforeAll() 函数中调用，以确保每个测试都使用 fake 定时器。
beforeEach(() => {
jest.useFakeTimers();
});jest.runAllTimers()
jest.runAllTimers() 函数可以让 Jest 立即执行所有的定时器函数，以便我们可以控制测试的执行。该函数可以在测试文件中的任何位置调用，以便我们可以控制定时器函数的执行。
test('test runAllTimers', () => {
const callback = jest.fn();
setTimeout(callback, 1000);
jest.runAllTimers();
expect(callback).toHaveBeenCalledTimes(1);
});jest.advanceTimersByTime()
jest.advanceTimersByTime() 函数可以让 Jest 模拟时间的流逝，以便我们可以控制定时器函数的执行。该函数需要传入一个时间参数，以表示时间的流逝。
test('test advanceTimersByTime', () => {
const callback = jest.fn();
setTimeout(callback, 1000);
jest.advanceTimersByTime(1000);
expect(callback).toHaveBeenCalledTimes(1);
});Mock 定时器函数的示例
下面是一个使用 Jest mock 定时器函数的示例，该示例是一个简单的计时器应用程序，它使用 setInterval() 函数来实现计时器功能。我们将使用 Jest mock 掉 setInterval() 函数，以便更好地进行单元测试。
-- -------------------- ---- -------
-- --------
----- ----- -
------------- -
------------ - --
--------------- - -----
-
------- -
--------------- - -------------- -- -
---------------
-- ------
-
------ -
-------------------------------
-
-
-------------- - -------- -------------------- ---- -------
-- -------------
----- ----- - -------------------
----------------- -- -- -
--- ------
------------- -- -
----- - --- --------
---------------------
---
------------ -- -
----------------------
---
---------- ------- -- -- -
--------------
-------------------------------
------------------------------
-------------------------------
------------------------------
---
---------- ------ -- -- -
--------------
-------------------------------
-------------
-------------------------------
------------------------------
---
---在上面的示例中，我们首先创建了一个 Timer 类，该类使用 setInterval() 函数来实现计时器功能。然后，在测试文件中，我们使用 jest.useFakeTimers() 函数来启用 fake 定时器，以便我们可以控制定时器函数的执行。在每个测试之后，我们使用 jest.clearAllTimers() 函数来清除所有定时器函数。
在第一个测试中，我们测试了 start() 方法，该方法使用 setInterval() 函数来实现计时器功能。我们使用 jest.advanceTimersByTime() 函数模拟时间的流逝，并检查计时器的计数器是否正确。
在第二个测试中，我们测试了 stop() 方法，该方法使用 clearInterval() 函数来停止计时器。我们使用 jest.advanceTimersByTime() 函数模拟时间的流逝，并检查计时器的计数器是否正确。
通过上面的示例，我们可以看到，使用 Jest mock 定时器函数可以让我们更好地进行单元测试，以便更好地保证代码的质量和可靠性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3c34ea941bf713471cb12