如何给你的项目添加测试覆盖率徽章

看完我的测试教程之后，想必大家都能写出一个测试覆盖率极高的小项目了。测试覆盖率既然这么高，不秀一秀岂不是白瞎了，下面我们就来通过第三方服务来给你的项目加上测试覆盖率徽章，涉及到的内容有yaml配置，githubAction，codecov服务。

步骤

step 1: 配置github workflow，跑流水线

项目根目录下创建文件.github/workflows/ci.yml，github会自动识别这个目录下有效的yml文件来执行。

name: test

on: [push]

jobs:

unit-test:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v2 // 拉取代码

- uses: actions/setup-node@v2 //设置node环境

with:

node-version: '20.x'

- run: npm i

- run: npm run coverage // 执行命令

保存之后push代码看一下，命令都依次执行了

step 2: codecov

介绍

about.codecov.io/ 是一个测试覆盖率一站式服务平台，支持各种语言，上传覆盖率报告给他们之后，他们会提供一系列工具来帮助我们分析覆盖率。

包括覆盖率的变化走势，文件夹分析，单行分析等。

接入

我们用github登陆之后，codecov会访问我们的仓库列表并展示，我们选择需要配置的项目

然后他们会给出接入步骤

第一步 复制给出的secret去github仓库的设置页面新增一个secret

第二步 复制给出的配置代码粘贴到我们之前写好的yml文件后面

...

...

...

...

- run: npm run coverage // 执行命令

- name: Upload coverage reports to Codecov

uses: codecov/codecov-action@v4.0.1

with:

token: ${{ secrets.CODECOV_TOKEN }}

slug: 'xxxx'

第三步 push 即可

去workflow看一下执行情况

可以看到新增的命令也执行成功了，点开看一下详情

可以发现codecov提供的插件会自动的寻找覆盖率报告并上传。

如果你的项目的报告位置比较奇葩，也可以自行配置目录，codecov CLI的配置可以看这里(https://github.com/codecov/codecov-action?tab=readme-ov-file#arguments)

step 3: 找到codecov badge 并更新readme

去你的codecov项目主页，在设置页面找到徽章并复制粘贴到你的readme的开头。

这样我们耀眼的测试覆盖率就展示到了我们的项目首页，并且会随着每次提交实时更新。

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：【文末自行领取】

​

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！