背景

talk is cheap，show you the pic 🤔. 下图是在测试用例中使用了 RealTimer:

RealTimer
可以看到用例真实耗时和 timer 基本一致（请看“默认 3 秒关闭的 case ”）。如果用例里有大量 timer，那么对单测的效率是相当不利的。在查阅了 Jest Mock Timers 后，我对用例进行了修改，下图是修改后的用例执行结果（节省了 10s 时间）：
耗时影响
下面我将详细介绍如何对 timer 进行 mock。

一、mock timer

1.1 jest.useFakeTimers(implementation?: 'modern' | 'legacy')

执行这个方法，让 jest 使用 mock timer，只有使用了 mock timer，后续才能让 jest 在任意时刻执行 timer 任务。
我们一般会在所有用例执行之前去执行 jest.useFakeTimers()，例如：

// 适用于 timer 场景要多的用例
describe("test", => {
    beforeAll(() => jest.useFakeTimers());
    // 用例执行结束后换回 realTimers
    afterAll(() => jest.useRealTimers());
});

1.2 jest.runAllTimers()

我们看下官网对其的描述：

Exhausts both the macro-task queue (i.e., all tasks queued by setTimeout(), setInterval(), and setImmediate()) and the micro-task queue (usually interfaced in node via process.nextTick).

When this API is called, all pending macro-tasks and micro-tasks will be executed. If those tasks themselves schedule new tasks, those will be continually exhausted until there are no more tasks remaining in the queue.

This is often useful for synchronously executing setTimeouts during a test in order to synchronously assert about some behavior that would only happen after the setTimeout() or setInterval() callbacks executed. See the Timer mocks doc for more information.

概括：jest.runAllTimers() 会执行宏任务队列以及微任务队列中所有的任务，如果这些任务会产生新的任务，那么新的任务也会被执行，直至队列为空。

这个 api 的关键点就是会执行完所有的任务队列，这在 setInterval 的场景下非常有用，但也可能造成问题。比如有一个用例是调用 showModal 方法后期望模态窗渲染到 dom 中：

it('正确渲染默认配置', async () => {
  CountdownModal.showModal({});

  jest.runAllTimers();
  expect(document.querySelector(ROOT_CLS)).toMatchSnapshot();
});

因为 showModal 方法是异步的，所以这里使用了 jest.runAllTimers() 请问了解这个组件的同学，您认为这个用例能正常通过么？

答案是：不通过！ 结果如下：

image.png

因为 CountdownModal 是基于 ahooks useCountdown 的，且倒计时结束后的回调是关闭模态框，这里执行了 jest.runAllTimers() 会把所有定时器执行完，即组件的整个生命周期都结束了，所以 dom 中自然没有组件的节点。我们可以修改下用例来证实：

it('正确渲染默认配置', async () => {
  CountdownModal.showModal({
    onCountdownEnd: () => console.log('没用的啦，都结束了！！'),
  });

  jest.runAllTimers();
  expect(document.querySelector(ROOT_CLS)).toMatchSnapshot();
});

执行结果如下（倒计时结束的回调已经被调用）：

image.png

1.3 jest.runOnlyPendingTimers()

Executes only the macro-tasks that are currently pending (i.e., only the tasks that have been queued by setTimeout() or setInterval() up to this point). If any of the currently pending macro-tasks schedule new macro-tasks, those new tasks will not be executed by this call.

This is useful for scenarios such as one where the module being tested schedules a setTimeout() whose callback schedules another setTimeout() recursively (meaning the scheduling never stops). In these scenarios, it's useful to be able to run forward in time by a single step at a time.

概括：把宏任务队列中已经存在的任务执行完，因为执行任务而添加的新任务将不会执行。

这个 api 在解决上文提到的问题就变得非常有用了，因为我们知道调用 showModal 后第一个宏任务就是渲染模态窗，模态窗渲染后在 useCountdown 中会调用 setInterval 来不断的产生定时任务，所以我们这里只需要执行当前的 pending 的宏任务。

1.4 jest.advanceTimersToNextTimer(steps)

Advances all timers by the needed milliseconds so that only the next timeouts/intervals will run.

Optionally, you can provide steps, so it will run steps amount of next timeouts/intervals.

概括：忽视 timer 的延迟，直接执行下一个 timer 回调，如果传入了 steps，那么会执行 steps 个 timer 回调。

这个 api 同样可以解决上文的问题，把 jest.runAllTimers() 改为 jest.advanceTimersToNextTimer(1)即可，表示执行指定 steps 个任务。

1.5 jest.clearAllTimers()

Removes any pending timers from the timer system.

This means, if any timers have been scheduled (but have not yet executed), they will be cleared and will never have the opportunity to execute in the future.

概括：相当于清空任务队列，注意是“清空”而不是“执行”。

为了避免当前用例对下一个用例造成影响，我们应当在每个用例执行完毕后清理环境，比如：清理可能存在的未执行的 timer 回调

// 在最佳实践中说明在使用了 timer 的场景中 在case最后应当清除可能未执行的 timer
describe('静态方法', () => {
  afterEach(() => {
    jest.clearAllTimers();
  });
}

二、踩坑记录

2.1 An update to xxx inside a test was not wrapped in act(...)

image.png

当我们在测试用例中涉及到更新组件 state 时需要用 act() 包裹起来。这里是有点坑的，因为有的操作并不是显示更新了 state，还需要 RD 本人对被测试代码有一定了解才行，比如这个 case：

it('默认3秒后关闭弹窗', async () => {
  CountdownModal.showModal({ okText: '默认关闭'});

  jest.advanceTimersToNextTimer(1);
  const node = document.querySelector(ROOT_CLS);
  expect(node).toBeInTheDocument();

  jest.advanceTimersByTime(3000);
  jest.runOnlyPendingTimers();

  expect(node).not.toBeInTheDocument();
});

在 case 中并未对 state 做更新操作，但是仍旧报了这个错。其实是因为在 useCountdown 中进行了更新 state 操作，而在我们的 case 中执行 jest.advanceTimersByTime(3000) 时，是 jest 在调用这些任务，所以这里会报这个错，解决办法就是用 act 把操作 fakeTimer 的代码包起来即可：

image.png