⚡️

GitHubのプルリクコメントにVitestのカバレッジレポートのSummaryを表示する

2024/06/11に公開

いきなり結論

こういう感じで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,
      },
    },
  },
});

閾値を下回っていれば、上記のように赤丸で表示されます。

設定方法

使うのはこちらの便利なツールです。

https://github.com/marketplace/actions/vitest-coverage-report

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-actioncoverage/coverage-summary.jsonにレポートが置かれている前提でなければうまく動いてくれません。
そのため、カバレッジレポートの出力先をカスタム設定している場合は、テストが実行された後に作成されたレポートの置き場所をjson-summary-pathで教えてあげる必要があります。

おわりに

PRのたびにカバレッジが出てくれると、めちゃくちゃ便利ですよね。レビュワーもレビュイーもカバレッジを意識しながらレビューに臨めるので、結果としてカバレッジ向上ひいては品質向上につながってくれるかもしれません。

設定自体は簡単なので、やるだけやっておきたいですね。

📢 Kobe.tsというTypeScriptコミュニティを主催しています

フロント・バックエンドに限らず、周辺知識も含めてTypeScriptの勉強会を主催しています。

毎朝オフラインでもくもくしたり、神戸を中心に関西でLTもしています。

盛り上がってる感を出していきたいので、良ければメンバーにだけでもなってください😣

https://kobets.connpass.com/

Discussion