精神上最好的避难所还是书本：它们既不会忘了你，也不会欺骗你。——罗曼·罗兰
我们已经知道vitest是一个很好用的单元测试框架，我们今天聊一下如何在github action集成vitest
首先我们创建项目
代码语言：javascript复制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
{
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:run": "vitest run"
},
"devDependencies": {
"@vitest/ui": "latest",
"vite": "latest",
"vitest": "latest"
}
}简单配置一下ts环境tsconfig.json
{
"compilerOptions": {
"allowImportingTsExtensions": true
},
"include": [
"src",
"test"
],
"exclude": [
"node_modules"
]
}然后是代码
代码语言：javascript复制// src/sum.ts
export function sum(a: number, b: number) {
return a b
}以及单元测试
代码语言：javascript复制// 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)
})我们执行一遍开测
代码语言：javascript复制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模板啦
# .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
代码语言：javascript复制// 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
这里进行了输出：
代码语言：javascript复制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.
