Codecov + GitHub Actions + Jest でカバレッジのバッジを表示する

3 min読了の目安(約1800字TECH技術記事

はじめに

開発しているリポジトリにカバレッジのバッジを表示してみたので書いていきたいと思います

https://github.com/tiwuofficial/street-fighter-v-data

1. Codecov への登録

https://codecov.io/

いろいろ選べるが GitHub を選択

2. Repository の登録

Add Repository を押すと Repository の一覧が表示されます

3. Token を GitHub の Secrets に追加

Repository を選択すると token が表示されます

表示された token は GitHub の Secrets に追加しておきます

4. カバレッジのアップロード

GitHub Actions でテストを実行後、結果を Codecov にアップロードします

https://github.com/marketplace/actions/codecov

npm run test:coveragejest --coverage が実行されます

アップロード時に先程取得した token を利用します

name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  test:
    name: Test
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Run Test
        run: npm run test:coverage
      - name: Upload Coverage
        uses: codecov/codecov-action@v1
        with:
          token: ${{ secrets.CODECOV_TOKEN }}

5. バッジの表示

Codecov の Settings -> Badge からコードをコピーして REAMDE.md に貼り付けて完成です!

[![codecov](https://codecov.io/gh/tiwuofficial/street-fighter-v-data/branch/master/graph/badge.svg?token=SLDK2V95ZQ)](undefined)

終わりに

特に苦労することはなかったのですが、最初の2回のコミットが失敗していて謎でした・・・