Ccmmutty logo
Commutty IT
5 min read

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

https://cdn.magicode.io/media/notebox/db57b083-a5d3-41c5-a29b-9b3ee6649545.jpeg

記事の内容

この記事を読むことで、以下ができるようになります
  • vitestをインストールし、テストを書けます
  • vitestでカバレッジを出力できます
  • vitestをPR作成時に実行できます
  • vitestのテストカバレッジをGitHub PR上に表示できます
適宜ポイントを補足します。

前提

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

手順編

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

一旦sum.tsとする。
export const sum = async (a: number, b: number) => Promise.resolve(a + b);

2. vitestのインストール

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

npm install -D vitest @vitest/coverage-c8

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.tstest.coverage.lines ~ statementsまでを指定することで、一定カバレッジ以下の場合、失敗扱いとできる
  • vitestのカバレッジをGitHub PRに出力するためのAction 「vitest-coverage-report」を利用するために、test.coverage.reporter"json""json-summary"を指定する必要がある

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

一旦sum.test.tsとする。
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. テストを実行して成功することを確認

npm run test:unit
実行結果:

3. CIの設定(GitHub / GitHub Actions)

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

本記事では、対象branchはmainとする。
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を使用している
  • GitHub Actionの最後のステップでif: always()をつけることで、テストが失敗してもワークフローを終わらせることなくレポートを行っている

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

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

プロダクトコードに適当なコードを追加し、プッシュして再度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 patternmainを指定
    • Require status checks to pass before mergingにチェック
    • ↑のすぐ下のコンボボックスにUnit Testと入力し、出てきた候補を選択
設定画面の状態:
実行後のPRの状態:

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

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

Discussion

コメントにはログインが必要です。