GitHub Actions Job Summaries で Jest のカバレッジレポートを表示する

Blog
May 11, 2022

概要

2022年5月9日に GitHub Actions Job Summaries がリリースされました。
GitHub Actions Job Summaries は、GitHub Actions のワークフロー内で $GITHUB_STEP_SUMMARY という環境変数に Markdown 形式の文字列を設定すると、ジョブのサマリーとして表示される機能です。
Supercharging GitHub Actions with Job Summaries

この記事では、Jest のカバレッジレポートを GitHub Job Summary へ表示する方法を説明します。
スクリーンショット:ジョブサマリーとしてカバレッジレポートが表示されている

確認した環境

  • Yarn
  • Jest v28.1.0

前提

テスト対象として、Jest の Getting started で説明している、sum.test.js を使います。

STEP1:カバレッジを表示するコマンドを追加する

カバレッジレポートを出力するコマンドをnpm-scripts に追加します。

package.json
    "scripts": {
+     "coverage": "jest --coverage"
    },

yarn coverage を実行すると、標準出力にカバレッジが出力されます。

yarn run v1.22.17
$ jest --coverage
 PASS  ./sum.test.js
  ✓ adds 1 + 2 to equal 3 (2 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |
 sum.js   |     100 |      100 |     100 |     100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.51 s, estimated 1 s
Ran all test suites.
✨  Done in 2.39s.

STEP2:カバレッジレポートをファイルに出力する設定を追加する

カバレッジレポートがファイルに出力されるように、Jest の設定を追加します。
ここでは例として、package.json に設定します。

package.json
  {
    "name": "practice-jest",
+    "jest": {
+      "coverageReporters": [
+        [
+          "text", { "file": "report.txt" }
+        ]
+      ]
+    },

yarn coverage を実行すると、coverage/report.txt に、次の内容でファイルが出力されます。

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 sum.js   |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------

このファイルの内容を$GITHUB_STEP_SUMMARY に渡せばよさそうです。
ただし、GitHub Flavored Markdown では、ファイルの先頭行と末尾行の罫線は不要なので、消す必要があります。

STEP3:GitHub Actions のワークフローを設定する

yarn coverage を実行し、出力されたカバレッジレポートの内容を $GITHUB_STEP_SUMMARY に渡すワークフローを作成します。
ワークフローを実行するタイミングは、master へプッシュしたときと、Pull Request を作成したときとします。

.github/workflows/test.yml
name: test
on:
  push:
    branches:
      - main
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '14.x'
        cache: 'yarn'

    - name: coverage
      run: |
        yarn install
        yarn coverage
        echo '# Coverage :rocket:' >> $GITHUB_STEP_SUMMARY
        # sed で先頭行と末尾行の不要な罫線を消す
        cat coverage/report.txt | sed '1d' | sed '$d' >> $GITHUB_STEP_SUMMARY

STEP4:動作を確認する

これまでの内容を GitHub にプッシュして、Pull Request を作成します。
GitHub Actions でワークフローが実行されます。
ワークフローのジョブが完了すると、Actions の詳細画面にジョブサマリーが表示されます。

スクリーンショット:GitHub Actions のジョブサマリーが枠線で強調されている

まとめ

GitHub Actions Job Summaries 便利!
Actions を作るときにも役立ちそうです。