（十一）Jest 中的 mock timer
平时开发中我们经常用到定时器setInterval 或者setTimeout ，现在我们就写一个定时器的测试用例代码如下：
// demo.js
export const lazy = (fn)=> {
setTimeout(() => {
fn();
}, 3000);
}
// demo.test.js
import {lazy} from './timerDemo'
test('should call fn after 3s', () => {
const callback = jest.fn();
lazy(callback);
setTimeout(() => {
expect(callback).toBeCalled();
}, 3001);
})
使用npm run test运行测试用例，运行结果如下：
如何解决这个问题呢？
方法一：
之前的笔记有一个done回调函数（五）Jest测试异步代码
此时我们利用done()来解决这个问题，代码如下：
import {lazy} from './timerDemo'
test('should call fn after 3s', (done) => {
const callback = jest.fn();
lazy(callback);
setTimeout(() => {
expect(callback).toBeCalled();
done();
}, 3001);
})
方法二：
今天我们学习一种新的解决办法，使用mock timer解决这个问题。jest 提供了mock timer 的功能，不要再使用真实的时间在这里等了，一个假的时间模拟一下就可以了。首先是jest.useFakeTimers() 的调用，它就告诉jest 在以后的测试中，可以使用假时间。当然只用它还不行，因为它只是表示可以使用，我们还要告诉jest在哪个地方使用，当jest 在测试的时候，到这个地方，它就自动使用假时间。两个函数，jest.runAllTimers(), 它表示把所有时间都跑完。具体到我们这个测试，我们希望执完lazy(callback) 就调用， 把lazy函数中的3s时间立刻跑完。可以使用jest.runAllTimers();
具体代码如下：
import {lazy} from './timerDemo'
jest.useFakeTimers();//可以使用假函数
test('should call fn after 3s', () => {
const callback = jest.fn();
lazy(callback);
jest.runAllTimers();//让所有定时器立即执行
expect(callback).toBeCalled();
//expect(callback).toHaveBeenCalledTimes(1) 也可以使用
})
如果有多个定时器的时候，我们修改demo.js的代码如下：
export const lazy = (fn)=> {
setTimeout(() => {
fn();
console.log('第一个定时器执行')
setTimeout(()=>{
console.log('第二个定时器执行')
},3000)
}, 3000);
}
此时运行测试用例的时候，两个定时器会立马都被执行掉。但如果我们只想运行最外层的那个定时器时，我们需要引入 runOnlyPendingTimers() ，只执行一个定时操作。具体代码如下：
//demo.js
export const lazy = (fn)=> {
setTimeout(() => {
fn();
console.log('第一个定时器执行')
setTimeout(()=>{
console.log('第二个定时器执行')
},3000)
}, 3000);
}
//demo.test.js
import {lazy} from './timerDemo'
jest.useFakeTimers();//可以使用假函数
test('should call fn after 3s', () => {
const callback = jest.fn();
lazy(callback);
jest.runOnlyPendingTimers();//让所有定时器立即执行
//expect(callback).toBeCalled();
expect(callback).toHaveBeenCalledTimes(1)
})
自己试着运行一下我们会发现，只有第一个执行了。
同时也可以使用 jest.advanceTimer() 快进几秒。
具体代码使用如下：
//demo.js
export const lazy = (fn)=> {
setTimeout(() => {
fn();
console.log('第一个定时器执行')
setTimeout(()=>{
console.log('第二个定时器执行')
},3000)
}, 3000);
}
//demo.test.js
import {lazy} from './timerDemo'
jest.useFakeTimers();//可以使用假函数
test('should call fn after 3s', () => {
const callback = jest.fn();
lazy(callback);
jest.advanceTimersByTime(3000)
expect(callback).toHaveBeenCalledTimes(1)
})
运行结果发现只执行了第一个定时器，如果还想执行第二个，我们可以修改demo.test.js代码如下：
import {lazy} from './timerDemo'
jest.useFakeTimers();//可以使用假函数
test('should call fn after 3s', () => {
const callback = jest.fn();
lazy(callback);
jest.advanceTimersByTime(3000)
jest.advanceTimersByTime(3000)//第二个的时间以第一个的时间为基数
//expect(callback).toBeCalled();
expect(callback).toHaveBeenCalledTimes(1)
})
此时两个定时器都会执行。 使用jest.advanceTimersByTime(n)快进n时间执行定时，多个advanceTimerByTime连用时，后一个会以前一个的时间为基点，如果不想互相影响，我们可以使用钩子函数beforeEach解决这个问题。
前端交流群：扫码进去
