🏆

Pull Request時にカバレッジレポートを見れるようにしてコードレビューの質を上げよう！

2022/12/27に公開

Firebase

Test

Jest

tech

背景

最近会社でテストコードを書く機会が増えてきまして、その時にカバレッジを意識することが増えてきました。

jestの場合、 jest --coverage コマンドを実行すると、 coverage/lcov-report フォルダにカバレッジレポートのhtmlファイルが出力されます。
※参考画像

このカバレッジレポート、PR時に見れるようにしたらコードレビューの質があがるんじゃないかなーーーーーーーーーーーーーーーって思ったのです！

「ここのファイル、この行のここでbranchesカバレッジが不足してるからテストケース追加しておいてください！(画像ペタ)(Request Changedポチ-)」
みたいな

コードだけ見てもなかなか分かりにくいですしね。

そんなわけで、今回はFirebase Hostingを利用して、 Jest、(後ついでにPlaywright)のテストレポートをPR時に閲覧できるようにしたいと思います！

やっていき

過程はいいからコード見せて！っていう人向けに、今回制作したコードはこちらにおいております

https://github.com/u-yas/demo-preview-report　をクローン
nodeを入手
firebase projectの作成
- こちらからfirebase projectを作成してください
- それか、後述するfirebase-toolsをインストールして

firebase login

でログインし、

firebase init

でプロジェクトを作成してください

4 firebase hostingのgithub actionsの設定
※事前に使うgithubリポジトリを作成しておいてください
firebase initを行い

❯◯ Hosting: Set up GitHub Action deploys

にチェックを入れてください
設定が始まるとpromptの入力を求められます

? For which GitHub repository would you like to set up a GitHub 
workflow? (format: user/repository)

ユーザー名とリポジトリ名ですね
これを実行するとgithubのリポジトリでsecretsを作成します

✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_${プロジェクトID}.

みたいな文言が表示されます。この環境変数を
.github/workflows/preview-jest.yml
および
.github/workflows/preview-playwright.ymlに書いてある

  firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_FIR_REPORT_PR }}'

FIREBASE_SERVICE_ACCOUNT_FIR_REPORT_PR部分部分を書き換えてください

? Set up the workflow to run a build script before every deploy? 
(y/N)

nで

? Set up automatic deployment to your site's live channel when a 
PR is merged? (Y/n)

お好みで(今回はn)

完成すると .github/workflows/firebase-hosting-pull-request.ymlが作成されますが、今回は利用しないので削除してしまって大丈夫です。

Firebase Hostingの追加サイトを作成する
playwright用とjest用で2個作成します。

Firebase ConsoleのHostingへ行き、画像の「別のサイトへ追加」をおしてください

サイトIDを入力して作成してください

.firebasercの書き換え
まず一旦.firebasercがあると思うので削除しちゃってください、

.firebaserc.exampleを.firebasercにリネームしてください

// .firebaserc
{
  "projects": {
    "default": "your-project"
  },
  "targets": {
    "your-project": {
      "hosting": {
        "e2e": [
          "your-SITE_ID-for-playwright"
        ],
        "jest": [
          "your-SITE_ID-for-jest-coverage"
        ]
      }
    }
  }
}

your-projectをfirebaseのproject_id
your-SITE_ID-for-playwrightをplaywrightのテストレポートをホスティングするSITE_ID
your-SITE_ID-for-jest-coverageをjestのlcov-reportをホスティングするSITE_ID
に変更してください。

PR建てる
適当にpushしてpull_requestを立てるとレポートがホスティングされているはずです！
↓こんな感じ
https://github.com/u-yas/demo-preview-report/pull/3

終わり

今回はFirebase Hostingでしたが、AWSならAmplifyとかS3で行ってもできると思います！
認証をかけようとすると、別途Cloud Functionsと連携したりが必要ですが、それはまた今度ということで...
すこしでも皆さんのお役に立てたら幸いです！
では！

---余談---
最近個人ブログを作ったのでよかったら覗いていってください！
https://u-yas.dev

背景

やっていき

終わり

Discussion