# 自动化测试

每次手动 npm run test 跑测试是很痛苦的。通常我们会把执行测试这一步放到流水线中,这也是前端工程化非常重要的一步,称为 “自动化测试”

正好我们可以使用 Github 推出的流水线工具—— Github Actions (opens new window) 。这一章,就带大家一起配置一下吧。

# Github Actions

在根目录添加 .github/workflows/node.js.yml

# .github/workflows/node.js.yml
name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install
    - run: npm test
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

这里 on 会监听 main 分支的 git push 和 PR 提交两个操作。 开发者在 main 分支推代码或者 PR 合并都会执行下面配置的 jobs 下面的 jobs 也很好理解,就是执行一些 bash 脚本。

现在把代码推到 main,会发现 Github Actions 开始执行,并成功。

# Coveralls

还记得刚开始时我们配置的 Jest 测试覆盖率么?如果流水线每次跑完都生成一份可视化的测试报告就完美了,不仅能做预警,还能实时了解整体测试覆盖情况。

比较著名的测试平台有 Coveralls (opens new window),它能够读取 Jest 生成的 lcov.info 覆盖率文件,并以可视化的方法展示出来:

首先在 Coveralls 官网 (opens new window) 用 Github 账号登入:

接下来,添加你的 Github 项目:

添加完项目并没有结束,如果你使用 Travis CI (opens new window) ,可能要手动写命令把 lcov.info 传给 Coveralls (opens new window) 。而 Github Actions 里有 Coveralls 组件,使用它就能自动完成:

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install
    - run: npm test
    
    - name: Coveralls
      uses: coverallsapp/github-action@master
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}
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

再次把代码推到 main 分支,等上一会,就可以在 Coveralls 项目列表页 (opens new window) 看到你的测试覆盖率情况了。

一旦把测试报告推到 Coveralls,你就可以在项目详情页里找到这个 Badge:

点击 embed 可以看到有多种嵌入方法,一般会把这个 Badge 放到 README.md,让项目看起来更有逼格:

Coverage Status (opens new window)

# 总结

这一章我们学会了如何配置 Github Actions,在每次推代码和合并 PR 时自动跑测试,并通过 coverallsapp/github-action@master 组件把测试覆盖率报告发送给 Coveralls (opens new window),将测试情况可视化。

最后更新: 5/14/2022, 12:02:03 PM