使用 Jest 进行测试时如何 mock 掉定时器函数？

在前端开发中，我们经常会使用定时器函数来实现一些功能，例如定时轮询、定时刷新等。但是，在进行单元测试时，这些定时器函数会带来一些麻烦。因为它们会影响测试的结果，例如测试结果会因为定时器的延迟而导致测试失败。因此，我们需要使用 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() 函数，以便更好地进行单元测试。

// www.javascriptcn.com code example
// timer.js
class Timer {
  constructor() {
    this.counter = 0;
    this.intervalId = null;
  }

  start() {
    this.intervalId = setInterval(() => {
      this.counter++;
    }, 1000);
  }

  stop() {
    clearInterval(this.intervalId);
  }
}

module.exports = Timer;

// www.javascriptcn.com code example
// timer.test.js
const Timer = require('./timer');

describe('Timer', () => {
  let timer;

  beforeEach(() => {
    timer = new Timer();
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.clearAllTimers();
  });

  test('test start', () => {
    timer.start();
    jest.advanceTimersByTime(1000);
    expect(timer.counter).toBe(1);
    jest.advanceTimersByTime(1000);
    expect(timer.counter).toBe(2);
  });

  test('test stop', () => {
    timer.start();
    jest.advanceTimersByTime(1000);
    timer.stop();
    jest.advanceTimersByTime(1000);
    expect(timer.counter).toBe(1);
  });
});

在上面的示例中，我们首先创建了一个 Timer 类，该类使用 setInterval() 函数来实现计时器功能。然后，在测试文件中，我们使用 jest.useFakeTimers() 函数来启用 fake 定时器，以便我们可以控制定时器函数的执行。在每个测试之后，我们使用 jest.clearAllTimers() 函数来清除所有定时器函数。

在第一个测试中，我们测试了 start() 方法，该方法使用 setInterval() 函数来实现计时器功能。我们使用 jest.advanceTimersByTime() 函数模拟时间的流逝，并检查计时器的计数器是否正确。

在第二个测试中，我们测试了 stop() 方法，该方法使用 clearInterval() 函数来停止计时器。我们使用 jest.advanceTimersByTime() 函数模拟时间的流逝，并检查计时器的计数器是否正确。

通过上面的示例，我们可以看到，使用 Jest mock 定时器函数可以让我们更好地进行单元测试，以便更好地保证代码的质量和可靠性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3c34ea941bf713471cb12