Czhlin's Blog

我的前端开发日志

0%

vitest的使用(二)

发表于 分类于
本文字数： 3.6k 阅读时长 ≈ 3 分钟

测试文件结构

从单元测试的结构上来说分为两部分，test suite（describe）和test case(it)。

  1. 测试模块→test suite→describe方法
  2. 测试用例→test case→it方法或test方法
1
2
3
4
5
6
import { describe, it } from 'vitest'
describe('util 模块', () => {
  it('request 方法', async () => {
    /** ... **/
  })
})

测试流程

测试就两步，执行代码、断言结果

  1. 执行代码
  2. 断言结果

测试演示

1
2
3
4
5
6
7
// util.ts
export const floor = (value: number) => {
  return Math.floor(value)
}
export const ceil = (value: number) => {
  return Math.ceil(value)
}

对floor函数进行测试

1
2
3
4
5
6
import { floor } from '../util'
describe('测试 uitl', () => {
  it('test floor', () => {
    expect(floor(3.25)).toBe(3)
  })
})
  1. describe表示测试分组
  2. it表示单个的测试用例
  3. expect(floor(3.25)).toBe(3)表示断言语句
    • 如果floor(3.25)等于3那么test floor这个用例通过
    • 如果floor(3.25)不等于3那么test floor这个用例就验证失败了

优雅地划分测试用例（cases）

  1. 一个功能放到一个it包裹的代码块里面，功能相互独立，形成一个case
  2. case里的expect断言可以有依赖关系也可以没有。有依赖关系的放前面
  3. case里的一个断言报错会导致后续的case用例也会中断不执行
  4. 边界情况可以放到单独的it代码块中，单独处理

钩子函数

  1. beforeAll
    • 注册一个回调函数，在开始运行describe中所有测试之前调用
    • 如果返回一个Promise,vitest会等待Promise执行完后才开始测试
  2. beforeEach
    • 注册一个回调函数，在运行describe的每一个测试之前都会调用一次
    • 如果返回一个Promise,vitest会等待Promise执行完后才开始测试
  3. afterEach
    • 注册一个回调函数，在运行describe的每一个测试之后都会调用一次
    • 如果返回一个Promise,vitest会等待Promise执行完后才继续测试
  4. afterAll
    • 注册一个回调函数，在开始运行describe中所有测试之后调用
    • 如果返回一个Promise,vitest会等待Promise执行完后才继续测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 实际例子
describe('测试  component', () => {
  let component: MyComponent

  // 在每个测试之前执行的准备工作
  beforeEach(() => {
    // 创建一个新的组件实例
    component = new MyComponent()
  })
  test('fetchData 方法应正确获取数据', async () => {
    await component.fetchData()
    // 断言数据是否符合预期
    expect(component.data).toEqual([1, 2, 3, 4])
  })

  test('data 数组应为空数组', () => {
    // 断言数据是否为空数组
    expect(component.data).toEqual([])
  })
})

构子函数执行顺序

  1. 优先执行全局的before钩子再执行用例中的before钩子，然后执行测试用例
  2. 执行完测试用例后，会优先执行用例中的after钩子，最后再执行全局的after钩子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
beforeAll(() => console.log('Global - beforeAll'))
afterAll(() => console.log('Global - afterAll'))
beforeEach(() => console.log('Global - beforeEach'))
afterEach(() => console.log('Global - afterEach'))

describe('Scoped A', () => {
  beforeAll(() => {
    console.log('Scoped A - beforeAll')
  })
  beforeEach(() => {
    console.log('Scoped A - beforeEach')
  })
  afterAll(() => {
    console.log('Scoped A - afterAll')
  })
  afterEach(() => {
    console.log('Scoped A - afterEach')
  })
  it('Scoped A case 1', () => {
    console.log('Scoped A case 1')
  })
  it('Scoped A case 2', () => {
    console.log('Scoped A case 2')
  })
})
describe('Scoped B', () => {
  beforeAll(() => {
    console.log('Scoped B - beforeAll')
  })
  beforeEach(() => {
    console.log('Scoped B - beforeEach')
  })
  afterAll(() => {
    console.log('Scoped B - afterAll')
  })
  afterEach(() => {
    console.log('Scoped B - afterEach')
  })
  it('Scoped B case 1', () => {
    console.log('Scoped B case 1')
  })
  it('Scoped B case 2', () => {
    console.log('Scoped B case 2')
  })
})
// 打印结果
// Global - beforeAll
//   Scoped A - beforeAll
//     Global - beforeEach
//     Scoped A - beforeEach
//     Scoped A case 1
//     Scoped A - afterEach
//     Global - afterEach

//     Global - beforeEach
//     Scoped A - beforeEach
//     Scoped A case 2
//     Scoped A - afterEach
//     Global - afterEach
//   Scoped A - afterAll

//   Scoped B - beforeAll
//     Global - beforeEach
//     Scoped B - beforeEach
//     Scoped B case 1
//     Scoped B - afterEach
//     Global - afterEach

//     Global - beforeEach
//     Scoped B - beforeEach
//     Scoped B case 2
//     Scoped B - afterEach
//     Global - afterEach
//   Scoped B - afterAll
// Global - afterAll
相关文章