精神上最好的避难所还是书本:它们既不会忘了你,也不会欺骗你。——罗曼·罗兰

我们已经知道vitest是一个很好用的单元测试框架,我们今天聊一下如何在github action集成vitest

首先我们创建项目

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
Last login: Mon Sep  9 16:43:09 on ttys004

The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
Github-Id-VampireAchao:streampark achao$ cd /Users/achao/IdeaProjects/simple-vitest
# 安装vitest
Github-Id-VampireAchao:simple-vitest achao$ npm install -D vitest

added 43 packages in 30s

12 packages are looking for funding
run `npm fund` for details
# 前置依赖vite
Github-Id-VampireAchao:simple-vitest achao$ npm install -D vite

up to date, audited 44 packages in 805ms

12 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
Github-Id-VampireAchao:simple-vitest achao$ npm i -D @vitest/ui

added 10 packages, and audited 54 packages in 4s

14 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
Github-Id-VampireAchao:simple-vitest achao$ npm fund
simple-vitest
├─┬ https://opencollective.com/vitest
│ │ └── @vitest/ui@2.1.1, @vitest/utils@2.1.1, @vitest/pretty-format@2.1.1, vitest@2.1.1, @vitest/mocker@2.1.1, @vitest/runner@2.1.1, @vitest/snapshot@2.1.1, @vitest/spy@2.1.1, vite-node@2.1.1, @vitest/expect@2.1.1
│ └── https://github.com/sponsors/jonschlinkert
│ └── picomatch@4.0.2
└─┬ https://github.com/vitejs/vite?sponsor=1
│ └── vite@5.4.5
└─┬ https://opencollective.com/postcss/
│ └── postcss@8.4.45
└── https://github.com/sponsors/ai
└── nanoid@3.3.7

Github-Id-VampireAchao:simple-vitest achao$

这里我们配置脚本package.json

1
2
3
4
5
6
7
8
9
10
11
12
{
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:run": "vitest run"
},
"devDependencies": {
"@vitest/ui": "latest",
"vite": "latest",
"vitest": "latest"
}
}

简单配置一下ts环境tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
{
"compilerOptions": {
"allowImportingTsExtensions": true
},
"include": [
"src",
"test"
],
"exclude": [
"node_modules"
]
}

然后是代码

1
2
3
4
// src/sum.ts
export function sum(a: number, b: number) {
return a + b
}

以及单元测试

1
2
3
4
5
6
7
// test/sum.test.ts
import {expect, test} from 'vitest'
import {sum} from "../src/sum.ts"

test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3)
})

我们执行一遍开测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Github-Id-VampireAchao:simple-vitest achao$ npm run test:run

> test:run
> vitest run


RUN v2.1.1 /Users/achao/IdeaProjects/simple-vitest

test/sum.test.ts (1)
✓ adds 1 + 2 to equal 3

Test Files 1 passed (1)
Tests 1 passed (1)
Start at 16:29:34
Duration 195ms (transform 46ms, setup 0ms, collect 40ms, tests 1ms, environment 0ms, prepare 35ms)

Github-Id-VampireAchao:simple-vitest achao$

然后就是配置CI模板啦

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
# .github/workflows/ci.yml
name: Vitest CI

on:
push:
branches:
- main
pull_request:
branches:
- main

jobs:
test:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v3

- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18

- name: Install dependencies
run: npm install

- name: Run tests
run: npm run test:run

然后我们推送到github就可以看结果

https://github.com/VampireAchao/simple-vitest/actions/runs/10868547662

我们再使用一个错误的案例来测试,这里我们说1+1等于3

1
2
3
4
5
6
7
8
9
10
11
// test/sum.test.ts
import {expect, test} from 'vitest'
import {sum} from "../src/sum.ts"

test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3)
})

test('adds 1 + 1 to equal 3', () => {
expect(sum(1, 1)).toBe(3)
})

推送完毕后直接没通过

test wrong ci · VampireAchao/simple-vitest@c5a6225 · GitHub

这里进行了输出:

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
Run npm run test:run

> test:run
> vitest run


RUN v2.1.1 /home/runner/work/simple-vitest/simple-vitest

test/sum.test.ts (2 tests | 1 failed) 11ms
× adds 1 + 1 to equal 3
→ expected 2 to be 3 // Object.is equality

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯

FAIL test/sum.test.ts > adds 1 + 1 to equal 3
AssertionError: expected 2 to be 3 // Object.is equality

- Expected
+ Received

- 3
+ 2

test/sum.test.ts:10:23
8|
9| test('adds 1 + 1 to equal 3', () => {
10| expect(sum(1, 1)).toBe(3)
| ^
11| })
12|

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
Test Files 1 failed (1)
Tests 1 failed | 1 passed (2)

Start at 05:47:30
Duration 317ms (transform 38ms, setup 0ms, collect 35ms, tests 11ms, environment 0ms, prepare 72ms)


Error: AssertionError: expected 2 to be 3 // Object.is equality

- Expected
+ Received

- 3
+ 2

test/sum.test.ts:10:23


Error: Process completed with exit code 1.