前端单测学习（13）—— 自动化测试通过在CI中执行我们的单测收集覆盖率，同时接入外部的一个测试平台来达到消费我们的测试

前言

在往期的博客中，我们讲解了很多关于jest相关的单测和一些优化，我们运行的时候都是在本地运行，在实际工作中，除了本地运行之外，单测的运行更多用在于持续集成的自动化测试中。写单测的目的在于保证代码质量，并且通过单测可以在后续的一些重构过程中检验我们的输出是否符合预期之类的，为我们的改动提交提供保障，或者拦截问题。在实际工作中我们可能用到了gitlab这种，但是我们之前的单测项目都是单独一个托管在github上，我们今天就用github的能力来做类似的事情。

Github Actions

我们要在流水线中执行我们所有的单测，这里就需要用到Github Actions这个流水线工具，这里我们尝试配一下
首先是要在我们项目的根目录中创建配置的文件.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
    - uses: pnpm/action-setup@v2.2.2
      with:
        version: 7
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
    - run: pnpm install
    - run: pnpm test

简单走读一下，这里on部分增加了一些事件一节对应的配置，比如往main分支push代码或者发起一个PR，这时候都会执行我们的这个流水线
第二部分jobs就是指定一些运行环境的配置，然后执行我们的命令，就是最下面的两个命令，执行了install和test命令
注意，因为我们项目中用到了pnpm，我们在CI中执行也是要配置这个，关键的配置在下面这个，如果你是用的npm或者yarn的话可以不用这个，或者做响应的调整

- uses: pnpm/action-setup@v2.2.2
  with:
    version: 7

配置完毕，我们提一个PR看看

点开看看明细，我们可以看到最前面的这个有个勾，说明是已经运行通过，我们看一下具体的Details

这里可以看到我们的运行情况

覆盖率收集

我们在之前的博客中已经有提到了覆盖率报告的内容，这个报告能够让我们更好的了解当前项目的单测覆盖率情况，这个也是我们在质量保障中一个重要的环节，通过覆盖率我们可以做一些卡口，保证我们项目的代码质量。
这里我们也是找一些测试平台来体验下，可能各个公司内部有自己的实现，这里就不展开细聊
这里我找到了一个比较著名的测试平台 Coveralls，它能够读取 Jest 生成的覆盖率文件，并以可视化的方法展示出来：

通过github账号登录之后，我们在Coveralls上面选择我们的项目，然后开启一下

然后在我们的ci中就需要执行对应的actions了，在原有的actions下面添加下：

- name: Coveralls
      uses: coverallsapp/github-action@master
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}

提交上去之后，再看看我们的PR情况，提交都会重新触发CI执行

emmm，可以看到失败了，我们排查下哈，这里看报错信息就是没有找到覆盖率数据，我们之前跑的是test这个命令，这个是没有生成覆盖率数据的，得完成我们的另外一个命令utCoverage

- run: pnpm install
    - run: pnpm utCoverage

    - name: Coveralls
      uses: coverallsapp/github-action@master
      with:
        github-token: ${{ secrets.GITHUB_TOKEN }}

还有一个记得调整的，就是Jest的coverageReporters配置，为了方便消费，我们把各种格式的数据都补充改一下

"jest": {
    ...
    "coverageReporters": [
      "json", "lcov", "text", "clover", "cobertura"
    ]
}

我们重新提交一下代码，看看CI的执行情况

这回是执行成功了，而且有对应的覆盖率提示，我们点开Details看一下明细，跳转到Coveralls看一下，有具体的文件的覆盖率情况，我们可以看到useCounter.ts这个文件里面还是有一些代码没有覆盖到，我们就可以针对这个情况去继续补充单测，这里就不再展开了

结尾

上面我们通过在CI中执行我们的单测收集覆盖率，同时接入外部的一个测试平台 Coveralls来达到消费我们的测试覆盖率数据的目的，在此基础上可以通过覆盖率数据的展示和分析等来做一些代码质量的卡点，以笔者所在团队就是对单测有要求，每次大的提交（这个定义可以根据团队情况）都期望增加单元测试，另外一个就是保证变更后单测覆盖率不降低，至少是不降低，如果降低的话CI会到具体的一步会做阻塞不通过，要求开发补充单元测试才可以通过整个流程，进行后面的合代码发版等等。

传送门

代码仓库：github.com/liyixun/rea…