GitHub 上のプロジェクトに Codecov を導入してカバレッジの変化量を可視化する

Codedov を使うと出された PR がどれくらいのカバレッジの変化量があるのかを簡単に可視化することができます。こうしたものが数値となって見えるようになると、積極的にテストを書くきっかけにもなるはずです。OSS であれば無料で利用でき、導入もとても簡単でおすすめです。

高橋ゆうき

2023.01.14

以前 rehype の プラグインを作成したのですが、そのプロジェクトでカバレッジの変化量を可視化したくなったため、Codecov を導入してみました。

対応内容の PR は次になります。

Codecov の料金については公式サイトの Pricing に記載されおり、OSS であれば無料で利用できます。

事前準備

Codecov にサインアップして利用するリポジトリを setup する必要があります。

この手順については、公式ドキュメントの Quick Startに画像つきで解説されています。

今回のプロジェクトは public のため、アップロードのための TOKEN は不要です。

次に GitHub app integration で Codecov を該当リポジトリにインストールします。

GitHub app integrationでインストールする

Vitest でカバレッジを出力する

Codecov で対応しているレポートの形式は Supported Coverage Report Formats に記載されており、現時点では .xml .json .txt がサポートされています。

Vitest でカバレッジを出力する方法は公式ドキュメントの Coverage に記載されており、ここでは json で出力します。

Vitest でのカバレッジのデフォルトは c8 のようなので、npm i -D @vitest/coverage-c8 をインストールして、設定に次のコードを追加します。

// ./vite.config.ts
export default defineConfig({
  test: {
    // ...
    coverage: { reporter: ["json"] },
  },
});

package.json の scripts には次のコードを追加します。

// ./package.json
{
  "scripts": {
    "coverage": "vitest run --coverage"
  }
}

Github Actions で Codecov に coverage をアップロードする

Github Actions に次を追加します。私の場合にはテストと同じタイミングで実行しています。

- name: Generate coverage file
  run: npm run coverage
- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v3
  with:
    files: ./coverage/coverage-final.json

npm run coverage でカバレッジの json を出力し、codecov/codecov-action@v3 で Codecov に coverage をアップロードしています。

この状態で PR をだすと、次のように Codecov の bot がコメントしてくれます。

初回のCodecov botからのコメント

初回なので差分ができないとコメントされていますが、以降の PR からはこのメッセージは表示されなくなりカバレッジの差分が表示されるようになります。

2回目以降のCodecov botのコメント

バッジを付ける

README にバッジがついていると格好いいですよね。

ついてると格好いいバッジ

バッジをつけるための URL は Settings のサイドバーにある Badges & Graphs にコピペ用のコードが記載されているので、これをコピーして README にはりつけます。

コピペ用バッジのURLの在り処

まとめ

Codedov を使うと出された PR がどれくらいのカバレッジの変化量があるのかを簡単に可視化することができます。こうしたものが数値となって見えるようになると、積極的にテストを書くきっかけにもなるはずです。

OSS であれば無料で利用でき、導入もとても簡単でおすすめです。

AWS