【2022/9時点】vitestのカバレッジをGitHub PR上に連携する

記事の内容

• vitestをインストールし、テストを書けます
• vitestでカバレッジを出力できます
• vitestをPR作成時に実行できます
• vitestのテストカバレッジをGitHub PR上に表示できます

前提

• GitHubにリポジトリがあること
• GitHub Actionsが使える状態であること（publicなリポジトリ、Team/Enterpriseプラン等）

手順編

1. ./src/に適当なプロダクトコードを作成

export const sum = async (a: number, b: number) => Promise.resolve(a + b);

2. vitestのインストール

2-1. パッケージのインストール

• カバレッジを出力するためには、@vitest/coverage-c8パッケージが必要
  • https://vitest.dev/guide/coverage.html

2-2. ./vitest.config.tsを作成

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    coverage: {
      reporter: ["text", "json-summary", "json"],
      lines: 70,
      branches: 70,
      functions: 70,
      statements: 70,
    },
  },
});

• vitest.config.tsのtest.coverage.lines ~ statementsまでを指定することで、一定カバレッジ以下の場合、失敗扱いとできる
• vitestのカバレッジをGitHub PRに出力するためのAction 「vitest-coverage-report」を利用するために、test.coverage.reporterに"json"や"json-summary"を指定する必要がある
  • https://github.com/marketplace/actions/vitest-coverage-report#usage

2-3. ./test/unitに適当なテストコードを作成

import { describe, test, expect } from "vitest";
import { sum } from "../src/sum"

describe("vitest sample", () => {
  test("sum", async ()=> {
    expect(await (sum(1,2))).toBe(3);
  })
})

2-4. package.jsonにテスト用スクリプトを作成

{
  ... 
  "scripts": {
    "test:unit": "vitest run test/unit --coverage"
  },
}

2-5. テストを実行して成功することを確認

実行結果：

3. CIの設定（GitHub / GitHub Actions）

3-1. .github/workflows/ci.ymlに以下のコードをコピペ

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  unit-test:
    name: Unit Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - run: npm install
      - run: npm run test:unit
      - name: report coverage
        if: always()
        uses: davelosert/vitest-coverage-report-action@v1

• カバレッジのGitHub PRへの連携には以下Actionを使用している
  • https://github.com/marketplace/actions/vitest-coverage-report
  • vitest公式ではない模様
• GitHub Actionの最後のステップでif: always()をつけることで、テストが失敗してもワークフローを終わらせることなくレポートを行っている

3-2. PRを作成してGitHub Actionが通ることを確認

3-3. （任意）カバレッジが足りないとGitHub Actionが落ちることを確認

export const sum = async (a: number, b: number) => Promise.resolve(a + b);

export const subtract = async (a: number, b: number) => Promise.resolve(a - b);

3-4. （任意）CIで落ちるとPRをマージできないように設定

• GitHubリポジトリのSettingsタブから、Branchesを表示し、Add ruleをクリック
• Ruleを設定
  • Branch name patternにmainを指定
  • Require status checks to pass before mergingにチェック
  • ↑のすぐ下のコンボボックスにUnit Testと入力し、出てきた候補を選択

サンプルコードとバージョン

• vitest: 0.23.4
• @vitest/coverage-c8: 0.23.4