.png)
こんにちは、Another worksのCTO、塩原です。
最近、Another worksではフロントエンドのテスト作成を始める動きがあり、私たちも徐々にテストを書き始めています。
LT会も毎月開催する中で、せっかくなのでそこで話した内容の一部を記事にして公開することにしました。
今回の目的
まだテストがほとんど書かれていない状況ですので、まずは「テストを書く」こと自体を習慣化したいと考えています。その一環として、カバレッジレポートが作成できると、テストが増えていく過程を可視化するための一つの指標となり、レビュワーがどれだけテストを網羅して書けているかの確認にも活用できると思います。
ただし、全体のカバレッジレポートだけでは、まだテスト自体をほとんど書いていない現状では、PRを作成する際に新たに書かれたテストを可視化するのが難しいと感じています。そこで、提出するPRの差分がどれだけテストを含んでいるかを可視化するため、新たな取り組みを始めました。
使用技術
- jest "^29.5.0"
- @testing-library/react "^14.0.0"
やらなければならないこと
やらなければならないことは主に二つです。
- 特定のファイルに対するカバレッジレポートを出力すること
- 生成したカバレッジレポートをPRのコメントとして投稿すること
特定のファイルに対するカバレッジレポートの出力
まず、jestのカバレッジレポートで特定のファイルに対して出力する方法ですが、以下の公式ドキュメントに方法が記載されています。
https://jestjs.io/ja/docs/cli#--collectcoveragefromglob
$ jest "--coverage" "--collectCoverageFrom=${file_path1}|${file_path2}"
"|"で区切ることで、複数のファイルに対するカバレッジレポートを一度に出力することが可能です。
GitHubのPR差分に対して実行する
GitHubのPR差分を取得するためには、git diffを使用します。ファイルは先ほどのglobパターンに適応するために"|"で区切る必要があります。また、当社ではモノレポを採用しているため、"fc_client_web"というプロジェクトのディレクトリ名を削除しています。
- name: coverage-report
id: coverage-report
run: |
change_files=($(git diff --name-only origin/${GITHUB_BASE_REF}...origin/${GITHUB_HEAD_REF} | grep -E '^fc_client_web/src/.*\.ts(x)?$'))
for i in "${!change_files[@]}"; do
change_files[$i]=${change_files[$i]//fc_client_web\//}
done
IFS="|";files="${change_files[*]}";unset IFS;
npm run unit -- --coverage --collectCoverageFrom=$files --coverageReporters=json-summary
生成したカバレッジレポートをPRのコメントとして投稿すること
カバレッジレポートの生成までは上記で行うことができました。
最後にPRコメントに投稿する方法ですが、
--coverageReporters=json-summary こちらのオプションを付与することで、json形式でレポートの結果を吐き出してくれるのでそのjsonをmarkdownに加工してPRコメントに投稿することができます
- name: Post jest coverage comments
uses: actions/github-script@v6
env:
GH_TOKEN: ${{ github.token }}
COMMENT: ${{ steps.coverage-report.outputs.GITHUB_ENV }}
with:
script: |
const fs = require('fs')
const data = JSON.parse(fs.readFileSync('./fc_client_web/coverage/coverage-summary.json', 'utf8'))
let mdTable = "| File Path | Lines % | Functions % | Statements % | Branches % |\n| --- | --- | --- | --- | --- |\n";
for (const path in data) {
const coverage = data[path];
mdTable += `| ${path.replace('/home/runner/work/FC_Cloud/FC_Cloud/fc_client_web/', '')} | ${coverage.lines?.pct || 0} | ${coverage.functions?.pct || 0} | ${coverage.statements?.pct || 0} | ${coverage.branches?.pct || 0} |\n`;
}
github.rest.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: mdTable
})
結果としてはこのようにPRコメントに差分のあるファイルだけがカバレッジレポートとして表示されます。
まとめ
カバレッジレポートはあくまでも数値指標の一つでしかないですが、
テストを書く際のモチベーションとしても機能すればと思いこの仕組みを取り入れてみました。
テストについてはまたどこかで記事にできればと思います。
Share this post