前端自动化测试jest教程7-定时器测试

最新推荐文章于 2024-12-04 17:28:14 发布

原创最新推荐文章于 2024-12-04 17:28:14 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6 #前端 #npm

测试专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了在Jest中测试定时器的三种方法：1) 使用`done`方法，2) 结合`useFakeTimers`与`runAllTimers`，3) 使用`useFakeTimers`配合`advanceTimersByTime`。推荐使用第二种方法，它能避免长时间等待并确保测试效率。下篇将讨论Jest中的快照测试。

在这里插入图片描述

准备条件

以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章

这节教程主要讲解在jest中的怎样去测试定时器，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空
下面将介绍3种测试定时器的方法

在 index.js 中写入一些待测试方法

export const timer1 = (callback) => {
    setTimeout(() => {
        callback()
    }, 3000)
}

export const timer2 = (callback) => {
    setTimeout(() => {
        callback()
        setTimeout(() => {
            callback()
        }, 3000)
    }, 3000)
}

1.使用 done 方法

在 index.test.js 中写入测试用例

import { timer1, timer2 } from './index'

/**
 * 通过 done 对定时器进行测试 
 */
// it是test的别名
it('使用done，测试定时器', (done) => {
  timer1(() => {
    expect(1).toBe(1)
    done()
  })
})

这里有个问题，如果定时器时间很长的话，那测试用例运行的时间也会很长，因此不推荐这种写法

2.使用 useFakeTimers + runAllTimers 方法

/**
 * 使用 useFakeTimers + runAllTimers 方法 对定时器timer1进行测试
 */
// it是test的别名
it('使用useFakeTimers + runAllTimers 方法，测试定时器timer1', () => {
  const fn = jest.fn()
  timer1(fn)
  jest.runAllTimers()
  expect(fn).toHaveBeenCalledTimes(1) // 测试函数调用次数
})

/**
 * 使用 useFakeTimers + runAllTimers 方法 对定时器timer2进行测试
 */
// it是test的别名
it('使用useFakeTimers + runAllTimers 方法，测试定时器timer2', () => {
  const fn = jest.fn()
  timer2(fn)

  // 测试次数
  jest.runAllTimers()
  expect(fn).toHaveBeenCalledTimes(2) // 测试函数调用次数

  // 如果只想测试一次，可以使用以下方法
  // jest.runOnlyPendingTimers()
  // expect(fn).toHaveBeenCalledTimes(1)

})

这种方式不需要等待定时器全部完成,是我比较推荐的用法

使用jest.useFakeTimers()声明使用虚拟的时间
再使用 jest.runAllTimers() 将全部定时器立即运行结束
如果内部有多个定时器，只想运行一个定时器可以使用jest.runOnlyPendingTimers()

3.使用 useFakeTimers + advanceTimersByTime 方法

import { timer1, timer2 } from './index'

// 声明使用虚假的时间
jest.useFakeTimers()

/**
 * 使用 useFakeTimers + advanceTimersByTime 方法 对定时器timer2进行测试
 */
// it是test的别名
it('使用 useFakeTimers + advanceTimersByTime 方法，测试定时器timer2', () => {
  const fn = jest.fn()
  timer2(fn)
  jest.advanceTimersByTime(3000) // 将时间立刻推后3000s
  expect(fn).toHaveBeenCalledTimes(1)
  jest.advanceTimersByTime(3000) // 将时间再立刻推后3000s
  expect(fn).toHaveBeenCalledTimes(2)
})