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

前言

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

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

项目根目录下创建文件.github/workflows/ci.yml,github会自动识别这个目录下有效的yml文件来执行。关于yml文件的语法我也不会,我也是现学现卖。掘金有很多优质的文章介绍,比如juejin.cn/post/726817... 我就不过多介绍了。

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文件后面

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的配置可以看这里

step 3: 找到codecov badge 并更新readme

去你的codecov项目主页,在设置页面找到徽章并复制粘贴到你的readme的开头。这样我们耀眼的测试覆盖率就展示到了我们的项目首页,并且会随着每次提交实时更新。

98%的测试覆盖率是不是亮瞎双眼😊

相关推荐
bug_kada24 分钟前
详解 React useCallback & useMemo
前端·react.js
用户7847215099131 分钟前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼15 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
XiaoSong18 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
用户76787977373220 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
小仙女喂得猪1 天前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
艾小码1 天前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
骑自行车的码农1 天前
【React用到的一些算法】游标和栈
算法·react.js
小高0071 天前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
江城开朗的豌豆1 天前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js