Zenn
🎈

JestカバレッジレポートをGithub ActionsでPRに自動コメント

2021/12/07に公開
GitHub Actions
Jest
#
TDD
#
テスト
#
テストカバレッジ
tech

こちらは、ソフトウェアテストの小ネタ Advent Calendar 2021 で書いた記事です。

jest coverage report action

A GitHub action that reports about your code coverage in every pull request.

Github Actions で Jest の coverage report を PR に綺麗にコメントしてくれる
↓ こんな感じでコメントされる (jest-coverage-report-action の README より)

前提

  • npm version 7 以上 ( yarn でも可能)
  • Jest でテストを書く
  • Github Actions を使う
  • jest-coverage-report-action v2.0-rc.6

jest-coverage-report-action を選んだ時の気持ち (※これはフェーズやチームそれぞれです...!)

  • テストを頑張ってたくさん書いているので、PR ごとにカバレッジを見てテストを書くモチベーションを維持したい
  • 数人の少人数チームでサービス開発初期段階のため、カバレッジ指標を気にし過ぎることはまだしたくない(XX%以上じゃなければ PR merge しない! みたいなルールはまだ無い)
  • テストのレビューは人力では難しい。抜けはあるので、数値化してなんとなくの把握はしておきたい
  • local で jest --coverage コマンドだと coverage report は生成されるけど、いちいちコマンド打つのが面倒だし、チームの他の人に共有しづらい
  • Github Actions で coverage report の数値を PR にコメントするのを自分で実装してもいいけど面倒

なぜこれを書くのか？

README 見れば一発じゃん...って思いますよね、私も思っていましたが、ちょっと詰まってしまったため、書きます。
jest-coverage-report-action を使いたいなと思った方は、ぜひこちらを見てよかったら設定してください。

README 通りにまずは設定してみた

.github/workflows での最小設定

README に、最小設定はこうと書かれています (2021 年 12 月現在)

.github/workflows
name: 'coverage'
on:
    pull_request:
        branches:
            - master
            - main
jobs:
    coverage:
        runs-on: ubuntu-latest
        if: "!contains(github.event.head_commit.message, '[skip ci]')"
        steps:
            - uses: actions/checkout@v1
            - uses: ArtiomTr/jest-coverage-report-action@v2.0-rc.6
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}
                  #   threshold: 80 # optional parameter

実行するコマンドをカスタマイズ設定したい場合

Customizing test script

例えばこのコマンドを実行させるとします。
（※これは間違ってます. このままやっても動きません (後述))

package.json
"script": {
    npx jest --silent --ci --coverage --coverageReporters="text" --coverageReporters="text-summary"
}

.github/workflows の yml file に test-script option を追加する

.github/workflows
- uses: ArtiomTr/jest-coverage-report-action@v2.0-rc.6
  with:
      github-token: ${{ secrets.GITHUB_TOKEN }}
      test-script: npm run coverage:ci

よし！これで試そう！動きそう!とおもったら、

これで動かないよ・・・・・・・

少しハマる
👇👇👇👇👇👇

README に書かれている、 Customizing test script は間違っていてできなかった

これがうまくいかない。

package.json
"script": {
   npx jest --silent --ci --coverage --coverageReporters="text" --coverageReporters="text-summary"
}

同じくできなかったと言っている方のブログを発見しました。

https://oikawa.dev/posts/20210810_jest-coverage-report-action

デフォルト値を参考に test-script を書いてしまうと動きません。

ナルホド。。。

じゃあ、jest-coverage-report-action 自体はこれをどうやって実行してんの？？

ということで、jest-coverage-report-action 自体の ./github/workflows/test.yml を見てみましょう。

jest-coverage-report-action の ./github/workflows/test.yml

.github/workflows/test.yml
jobs:
    coverage:
        runs-on: ubuntu-latest
        name: Coverage report
        steps:
            - name: Checkout
              uses: actions/checkout@v2
            - name: Test coverage
              uses: ./ # Uses an action in the root directory
              with:
                  github-token: ${{ secrets.BOT_TOKEN }}
                  annotations: failed-tests
                  test-script: npm run test:coverage

npm run test:coverage が実行されています。

test:coverage はナニかな〜ということで、package.json を見てやります

jest-coverage-report-action の package.json scripts

package.json
"scripts": {
  "test": "jest",
  "test:log-coverage": "jest --coverage",
  "test:coverage": "jest --silent --testLocationInResults --ci --all --coverage --json --outputFile=\"report.json\"",
},

になってる（ 😇 ぇ? Customizing test script のと全然違う yann...）

jest-coverage-report-action の ./github/workflows/test.yml を真似して、こう設定してみます。

"scripts": {
  "test": "jest",
  "test:coverage": "npm run test -- --coverage --silent --testLocationInResults --ci --json --outputFile=\"report.json\"",
}

=> 動いた 🎉

結果的にこの設定になりました

package.json
"scripts": {
    "test": "jest",
    "test:coverage": "npm run test -- --coverage --silent --testLocationInResults --ci --json --outputFile=\"report.json\""
}
.github/workflows/test.yml
steps:
     uses: ArtiomTr/jest-coverage-report-action@v2.0-rc.6
     with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
         test-script: npm run test:coverage

Tips

yarn を使う場合

yarn を使っている場合は、package-manager option で yarn を指定すればいいそうです。
default では npm が指定されています。

.github/workflows/test.yml
steps:
     uses: ArtiomTr/jest-coverage-report-action@v2.0-rc.6
     with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
	 package-manager: 'yarn'    // この option を記述
         test-script: npm run test:coverage

coverage 数値が XX% 以下の場合は PR を reject したい場合

threshold option を提供してくれていて、%で指定することができます

.github/workflows/test.yml
steps:
     uses: ArtiomTr/jest-coverage-report-action@v2.0-rc.6
     with:
         github-token: ${{ secrets.GITHUB_TOKEN }}
         test-script: npm run test:coverage
	 threshold: 80 # 'Coverage threshold. If total coverage is less than threshold 80%, PR will be rejected'

他にも提供されている option はこちら

ci を skip したい時

README のこちらの最小構成として紹介されている、

.github/workflows
jobs:
    coverage:
        runs-on: ubuntu-latest
        if: "!contains(github.event.head_commit.message, '[skip ci]')"
        steps:
            - uses: actions/checkout@v1
            - uses: ArtiomTr/jest-coverage-report-action@v2.0-rc.6
              with:
                  github-token: ${{ secrets.GITHUB_TOKEN }}

この 1 文は書かなくても大丈夫です（以前は必要だった）

if: "!contains(github.event.head_commit.message, '[skip ci]')"

やってることとしては、commit message に [skip ci] と描いている場合は、steps を実行しないということなのですが、
現在は記載しなくても、[skip ci], [ci skip], [no ci], [skip actions], or [actions skip] のどれかを書いていれば、ci が勝手に skip されるようになってます(便利!)

https://github.blog/changelog/2021-02-08-github-actions-skip-pull-request-and-push-workflows-with-skip-ci/

ちなみに

npm version 6 が support されていない. version 7 以上が必要でした

npm version 6 を使っていたのですが、6 はサポートされてないぽくて、jest-coverage-report が使えませんでした。
このようなエラーになります。

npm ERR! notsup Unsupported engine
wanted: {"node":"^14.17","npm":"^7.11"} (current: {"node":"14.18.1","npm":"6.14.15"})

Discussion