⚡️
GitHubのプルリクコメントにVitestのカバレッジレポートのSummaryを表示する
いきなり結論
こういう感じでGitHubのプルリクコメント上にカバレッジレポートを表示してくれます。
以下のように設定することで、Status列の表示が変わります。閾値が設定されていなければ青色に。
閾値が設定されており、それを上回っていれば緑の丸かつ、「🎯 80%」のように閾値を表示してくれます。
vitest.config.ts
import * as path from 'path';
import swc from 'unplugin-swc';
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
// 略
coverage: {
// 略
thresholds: {
statements: 80,
},
},
},
});
閾値を下回っていれば、上記のように赤丸で表示されます。
設定方法
使うのはこちらの便利なツールです。
Vitestの設定
json-summary形式でのレポートを出力するよう設定しておく必要があります。
vitest.config.ts
import * as path from 'path';
import swc from 'unplugin-swc';
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
// 略
coverage: {
// 略
reporter: ['text', 'html', 'json-summary'],
// 略
},
},
});
ワークフローの設定
基本的に上記のページに記載されている設定方法をそのままコピペするだけでよいです。
name: Unit Tests
on:
pull_request:
branches:
# 略
jobs:
Unit-Tests:
runs-on: ubuntu-latest
permissions:
# vitest-coverage-report-actionのための権限
contents: read
pull-requests: write
# 略
- name: vitest
run: |
npm run test:cov
# これを追加すれば、勝手にサマリーを作ってくれます
- name: 'Report Coverage'
uses: davelosert/vitest-coverage-report-action@v2
with:
json-summary-path: coverage/vitest/coverage-summary.json
# 略
ハマりポイント
davelosert/vitest-coverage-report-actionはcoverage/coverage-summary.jsonにレポートが置かれている前提でなければうまく動いてくれません。
そのため、カバレッジレポートの出力先をカスタム設定している場合は、テストが実行された後に作成されたレポートの置き場所をjson-summary-pathで教えてあげる必要があります。
おわりに
PRのたびにカバレッジが出てくれると、めちゃくちゃ便利ですよね。レビュワーもレビュイーもカバレッジを意識しながらレビューに臨めるので、結果としてカバレッジ向上ひいては品質向上につながってくれるかもしれません。
設定自体は簡単なので、やるだけやっておきたいですね。
📢 Kobe.tsというTypeScriptコミュニティを主催しています
フロント・バックエンドに限らず、周辺知識も含めてTypeScriptの勉強会を主催しています。
毎朝オフラインでもくもくしたり、神戸を中心に関西でLTもしています。
盛り上がってる感を出していきたいので、良ければメンバーにだけでもなってください😣
Discussion