Jest 测试时如何 mock 掉 setTimeout 和 setInterval？

在前端开发中，我们常常需要使用到定时器来完成一些动态操作，比如轮播图、倒计时等等。而在前端测试中，我们需要对这些操作进行测试，以保证我们的代码能够稳定运行并处理各种预期的情况。但是，测试中使用原生的 setTimeout 和 setInterval 会使得测试变得不稳定，因为它们需要等待一定的时间才能执行。为了解决这个问题，我们可以使用 Jest 提供的 Mock 功能来 mock 掉这些定时器操作。

为什么需要 Mock setTimeout 和 setInterval？

在测试中使用真正的 setTimeout 和 setInterval 会使得测试变得极不稳定，因为例如一个定时器的时间过长，测试需要等待很长时间才能运行完成。这种测试效率很低，而且不容易被排除错误。

Jest 提供了一种更好的解决方法，即使用 Mock 完成这些操作，Mock 在测试中的主要作用就是模拟真实场景来方便测试操作。因此，我们可以使用 Mock 代替真正的定时器来完成测试操作，从而提高测试效率。

使用 Jest Mock setTimeout 和 setInterval 的方法

我们可以使用 Jest 的 Mock 机制来代替真正的 setTimeout 和 setInterval。Mock 功能就是用来模拟一些场景并替换掉真正的处理函数。通过 Mock 功能，就能够快速的定位问题，同时还能提高测试的速度与测试的准确性。

以下将介绍如何使用 Jest Mock setTimeout 和 setInterval：

1. 在测试文件中添加 Jest 的 fake time 功能，例如：

jest.useFakeTimers();

1. 将需要 Mock 的 setTimeout 和 setInterval 的操作包装在一个闭包中：

describe('test', () => {
  test('mock setTimeout', () => {
    const callback = jest.fn();
    setTimeout(() => {
      callback();
    }, 1000);
    jest.runAllTimers(); // 相当于把时钟拨到下一帧
    expect(callback).toHaveBeenCalled();
  });

  test('mock setInterval', () => {
    const callback = jest.fn();
    setInterval(() => {
      callback();
    }, 1000);
    jest.runOnlyPendingTimers();
    expect(callback).toHaveBeenCalledTimes(1);
  });
});

在第一个测试用例中，我们使用了 Jest 的 runAllTimers 方法，它可以模拟 Test 直接执行完所有的 setTimeout 操作，返回最终运行的结果。而在第二个测试用例中，则是使用了 runOnlyPendingTimers 方法来模拟 Test 直接执行完所有的 setInterval 操作，同时还会自动清除掉一些已经过期的事件。

这样，我们就可以愉快地 Mock setTimeout 和 setInterval 啦！

总结

这篇文章简单介绍了如何使用 Jest Mock setTimeout 和 setInterval。Mock 功能是前端测试中非常有用的技术，能够帮助我们优化测试效率，缩短测试时间，并且更容易发现测试中存在的问题。希望本文对大家有所帮助，谢谢阅读！

示例代码：

describe('test', () => {
  test('mock setTimeout', () => {
    const callback = jest.fn();
    setTimeout(() => {
      callback();
    }, 1000);
    jest.runAllTimers(); // 相当于把时钟拨到下一帧
    expect(callback).toHaveBeenCalled();
  });

  test('mock setInterval', () => {
    const callback = jest.fn();
    setInterval(() => {
      callback();
    }, 1000);
    jest.runOnlyPendingTimers();
    expect(callback).toHaveBeenCalledTimes(1);
  });
});

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594c2c2eb4cecbf2d908b91