GitHub PR 作成時に Coverage を計測する

GitHub Actions を使って、PR 作成時に Coverage を計測するようにしてみました。
2021.01.28

当初は Vue3 に対応させるネタにしようと情報収集を始めたのですが、 Vuetify の Vue3 対応が当分先になりそうということが判明したので、現時点での対応は断念しました。

Vuetifyの現在のバージョンはVue 3をサポートしていません。 Vue3に対応する Vuetify v3 がリリース予定です。 新しいプロジェクトを作成する場合は、Vue CLI プロンプトから Vue 2 を選択したか、既存の Vue 2 プロジェクトにインストールすることを確認してください。

Vuetifyロードマップ — Vuetify

リリース目標: 2021年Q3

vue.js - How to connect Vue 3 with Vuetify? - Stack Overflow

As of July 2020 Vue 3 is unsupported by Vuetify 2.x. All components are being refactored for Vue 3 per Vuetify's task task list: https://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba

代わりに、最近 GitHub Actions で Coverage を計測するようにしたので、そのネタを共有したいと思います。

プロジェクトに単体テストを追加

いつもの Vue.js プロジェクトの Coverage を計測するため、まず単体テストプラグインを追加します。 手順は下記のページの通りです。

@vue/cli-plugin-unit-jest | Vue CLI

% vue add unit-jest

次に、パスするテストを適当に作成します。

tests/unit/components/VuetifyDialog.spec.js

import Vue from 'vue';
import Vuetify from 'vuetify';

import {mount} from '@vue/test-utils'
import VuetifyDialog from '@/components/VuetifyDialog.vue'

Vue.use(Vuetify);

describe('VuetifyDialog.vue', () => {
  it('renders props.label when passed', () => {
    const label = 'button label'
    const wrapper = mount(VuetifyDialog, {
      propsData: { label }
    })
    expect(wrapper.text()).toMatch(label)
  })
})

作成したら、単体テストを実行してみます。

% vue-cli-service test:unit
 PASS  tests/unit/components/VuetifyDialog.spec.js
  VuetifyDialog.vue
    ✓ renders props.label when passed (56ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.841s, estimated 2s
Ran all test suites.

ローカルで Coverage 計測確認

続けて Coverage 計測してみます。

% vue-cli-service test:unit --coverage
 PASS  tests/unit/components/VuetifyDialog.spec.js
  VuetifyDialog.vue
    ✓ renders props.label when passed (60ms)

-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files          |      100 |      100 |      100 |      100 |                   |
 VuetifyDialog.vue |      100 |      100 |      100 |      100 |                   |
-------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.566s
Ran all test suites.

GitHub Actions 設定追加

次は、以下を使って GitHub Actions で PR の際に Coverage を計測するようにします。

GitHub の Actions タブをクリックすると、以下のような画面が表示されます。 リポジトリが GitHub Actions を使うよう初期化されていなければ、まず初期化しておく必要があるようです。 (この操作なしでワークフローファイルを push しようとしたら拒否されました)

set up a workflow yourself リンクをクリックします。

GitHub Actions 開始時

デフォルトワークフローファイル

デフォルトで作成されているワークフローファイルを書き換えます。

変更後のワークフローファイル

.github/workflows/ci.yml

name: CI
on:
  pull_request:

jobs:
  tests:
    runs-on: ubuntu-18.04
    timeout-minutes: 10

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: Install dependencies
        run: npm install

      - name: Unit Test with coverage
        uses: mattallty/jest-github-action@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          test-command: "npm run test:unit"

ファイルをコミットします。

コミット画面

GitHub Actions の WorkflowsCI が表示されていることを確認します。

ワークフロー構成

これで、GitHub Actions 側の準備が出来ました。

PR 作成

続けて、PRを作成します。

PR作成画面

作成すると、Workflow が実行されます。

ワークフロー実行中

ワークフロー実行後1

ワークフロー実行後2

Coverage 結果が PR に表示されることを確認します。

Coverage計測結果表示

GitHub Actions の利用料金について

GitHub Actions は無料枠付(私はPROなので1GB/月,3000分/月)の有料サービスですので、利用状況については一応気にしておいたほうが良いです。

確認方法は以下の通りです。

最後に

とりあえず PR を作成したら無条件で全Coverageを計測するようにしていますが、 変更されたファイルのみを対象とするオプションもあります。 今後色々調整してみるつもりです。

Jest Annotations & Coverage · Actions · GitHub Marketplace

例によって、上記確認出来るソースを以下リポジトリに置いています。