阿超 > Vitest集成github action

Vitest集成github action

2024-09-15

前端

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

我们已经知道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.