在前端开发中，单元测试是非常重要的一环。而在 Jest 单元测试中，我们常常需要 Mock 掉一些异步操作，比如 setTimeout。本文将介绍如何在 Jest 单元测试中 Mock 掉 setTimeout。
setTimeout 的原理
在了解如何 Mock 掉 setTimeout 之前，我们需要先了解一下 setTimeout 的原理。setTimeout 是浏览器提供的一个异步操作函数，用来在指定的时间后执行一段代码。其原理是将要执行的代码放入任务队列中，等待指定的时间后执行。
Jest 中 Mock 掉 setTimeout 的方法
在 Jest 中，我们可以使用 jest.useFakeTimers() 函数来 Mock 掉 setTimeout。这个函数会将所有的定时器函数替换成一个模拟的版本，使得我们可以在测试中控制时间的流逝。
具体使用方法如下所示：
-------------- ------------ -- -- -
------------- -- -
---------------------
---
------------ -- -
----------------------
---
------------ ---- ---------- ------ -- -- -
----- -- - ----------
-------------- ------
----------------------------
-------------------------------
------------------------
------------------------------------
---
---在上面的代码中，我们首先调用 jest.useFakeTimers() 函数来启用模拟定时器。然后在每个测试用例结束后，我们需要调用 jest.clearAllTimers() 函数来清除所有的定时器。
在测试用例中，我们可以使用 jest.advanceTimersByTime() 函数来模拟时间的流逝。这个函数接受一个时间参数，表示时间的流逝。在上面的代码中，我们模拟了 1000 毫秒的时间流逝，并断言 setTimeout 回调函数被调用了一次。
Mock 掉 setTimeout 示例
下面是一个 Mock 掉 setTimeout 的示例代码：
-------- --------- -
------ --- ----------------- -- ------------------- -----
-
----- -------- ----------- -
----- ------------
------ -------
-
-------------- ----------- -- -- -
------------- -- -
---------------------
---
------------ -- -
----------------------
---
------------ ------ ---- ----- -------- ----- -- -- -
----- ------- - ------------
------------------------------
----- ---- - ----- --------
--------------------------
--------------------------------------------
----------------------------------------------------------------- ------
---
---在上面的代码中，我们定义了一个 fetchData 函数，它会等待 1000 毫秒后返回一个数据。在测试用例中，我们使用 jest.useFakeTimers() 函数来启用模拟定时器，并使用 jest.advanceTimersByTime() 函数来模拟时间的流逝。我们断言 fetchData 函数在 1000 毫秒后返回了正确的数据，并且 setTimeout 函数被正确地调用了一次。
总结
本文介绍了如何在 Jest 单元测试中 Mock 掉 setTimeout。我们可以使用 jest.useFakeTimers() 函数来启用模拟定时器，并使用 jest.advanceTimersByTime() 函数来模拟时间的流逝。这个方法可以帮助我们更好地进行单元测试，提高代码的质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d89f501886fbafa465817e