この記事は？
以下の記事の後編です。
https://qiita.com/art_526/items/860227764d8701f27610
この記事では、GithubActionsを使用してJestのスナップショットテストをCIで回していく手順を紹介します。
(筆者も初めてGithubActions使ったので、内容はほぼメモです)
対象の読者は？
- GithubActionsが初めての方
CIを構築する
本記事では、GithubActionsを用いてCIを構築します
GithubActionsとは
以下が公式ドキュメントです。
https://docs.github.com/ja/actions
GitHub Actionsを使用すると、ワールドクラスのCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイでき、コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。
GithubActionsはGithubが提供しているCI/CDのワークフローツールです。
なんとパブリックリポジトリなら無料で使用することが出来ます。
外部サービスを使用することなく、Github上で完結するのは凄く便利ですね👀
ワークフローを作成する
必要な情報の前準備
GithubActionsのワークフローに関する用語は以下のドキュメントを参照してください
https://docs.github.com/ja/actions/learn-github-actions/introduction-to-github-actions
ワークフローを作成するに当たり、以下の設計を行う必要があります。
- イベントトリガーはどのタイミングか？
- CIを回す環境はどこか？
- Jestのテストを回すために必要な環境はどう整えるか？
今回はミニマムな要件で十分なため、以下のように設定します。
- イベントトリガーはどのタイミングで検知するか
- pushタイミング
- CIを回す環境はどこか
- ubuntu(GithubActionsの初期値)
- Jestのテストを回すために必要な環境はどう整えるか
- node環境のセットアップを行うコミュニティアクションを利用する
準備は出来ましたので、実際にGithub上に設定していきましょう。
ワークフローを定義する
個人のGithubレポジトリを開き、Actionsをクリックします。
GithubActionsでは様々な初期テンプレートを用意しています。
今回は学習も兼ねて初期テンプレートは使わずに、自分で内容を定義していきます。
set up a workflow your selfをクリックします。
GithubActionsではyamlファイルを用いてworkflowの処理を定義することが出来ます。
先ほど要件定義した内容を反映させてcommitします。
name: jest-snapshot-test-actions
on: [push] #イベントトリガータイミング
jobs:
run-test:
runs-on: ubuntu-latest #CIを回す環境
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2.1.4 #nodeの環境をセットアップ
- run: npm install
- run: npm test
commitが成功すると${repository_name}/.github/workflows/配下にワークフローを定義したmain.yamlファイルが作成されます。
これでCIの構築が完了です。
CIを確認する
再度、Actionsを開いてみるとjest-snapshot-test-actionsというワークフローが作成されています。
ワークフローのジョブ名をクリックし、中身を確認して見ます。
意図通り、対象のテストが回っています🎉
GithubActionsを使用すると、外部のサービスを利用せずにCIを構築することが出来るので凄く便利です。
試しにスナップショットテストを落としてみる
前編で作成したスナップショットテストの対象ファイルを以下のように変更します。
<!--fail versionを追加-->
<h2>snap shot test!!! fail version!!!</h2>
この状態でプッシュして見て動作を再度確認して見ましょう。
スナップショットの変更を検知してCIが落ちました。
これでCIの構築は完成です。
最後に
スナップショットをCIで構築できると
開発者としてはUTを書く範囲の選択肢が広がるためメリットとしてかなり高いと感じています。
今回はスナップショットテストの学習として使用しましたが
実際にプロダクトに導入する機会があればまた記事にします。