GitHub 上のプロジェクトに Codecov を導入してカバレッジの変化量を可視化する
以前 rehype の プラグインを作成したのですが、そのプロジェクトでカバレッジの変化量を可視化したくなったため、Codecov を導入してみました。
対応内容の PR は次になります。
Codecov の料金については公式サイトの Pricing に記載されおり、OSS であれば無料で利用できます。
事前準備
Codecov にサインアップして利用するリポジトリを setup する必要があります。
この手順については、公式ドキュメントの Quick Startに画像つきで解説されています。
今回のプロジェクトは public のため、アップロードのための TOKEN は不要です。
次に GitHub app integration で Codecov を該当リポジトリにインストールします。
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 がコメントしてくれます。
初回なので差分ができないとコメントされていますが、以降の PR からはこのメッセージは表示されなくなりカバレッジの差分が表示されるようになります。
バッジを付ける
README にバッジがついていると格好いいですよね。
バッジをつけるための URL は Settings のサイドバーにある Badges & Graphs にコピペ用のコードが記載されているので、これをコピーして README にはりつけます。
まとめ
Codedov を使うと出された PR がどれくらいのカバレッジの変化量があるのかを簡単に可視化することができます。こうしたものが数値となって見えるようになると、積極的にテストを書くきっかけにもなるはずです。
OSS であれば無料で利用でき、導入もとても簡単でおすすめです。
