はじめに
第22回では「GitHub Actions」でCI/CDの基本について学びました。今回は、Webフロントエンド開発を例に、テストコードを書いてGitHub Actionsで実行するまでの流れを解説します。
事前準備
さっそく、開発環境の準備から始めましょう。今回はDev Containersを使って構築します。詳しい手順については、第19回を参照してください。
まず、npm init viteコマンドを実行してプロジェクトを作成します。プロジェクト直下で実行したいところですが、何らかのファイルが既に存在しているとコマンド実行がエラーになります。そのため、my-appディレクトリ内に1度作成してから移動しています。
1 | npm init vite my-app -- --template react-ts |
コマンドの実行が完了すると、次のようにプロジェクトが作成されます。
ディレクトリ移動後は、次のようになります。
プロジェクトが作成されていることが確認できたらアプリケーションを起動(npm run dev)しますが、先にパッケージをインストール(npm install)しておきましょう。
下図のようなシンプルなカウンターアプリが表示されたら成功です。
テストツールのインストール
今回は「Jest」と「Testing Library」を使って自動テストを作っていきます。次のコマンドを実行して、必要なパッケージをインストールしましょう。
1 | npm install --save-dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom |
jest.config.jsonをプロジェクト直下に作成し、次の内容を記載して保存します。
06 | "**/__tests__/**/*.+(ts|tsx|js)", |
07 | "**/?(*.)+(spec|test).+(ts|tsx|js)" |
10 | "^.+\\.(ts|tsx)$": "ts-jest" |
12 | "testEnvironment": "jsdom" |
テスト対象のコード作成
今回は、既に作成されているファイルを少し編集してアプリケーションのコードとします。src/App.tsxのファイルを開くといろいろ書かれていますが、次のコードのようにシンプルにします。
テストコード作成
次のテストコードを作成します。通常の開発ではtestsディレクトリにまとめたりもしますが、今回は1ファイルだけなのでsrc/ディレクトリに作成します。
App.test.tsxというファイルを作成して、次の内容を記載してから保存します。
1 | import '@testing-library/jest-dom' |
2 | import { render, screen } from '@testing-library/react' |
5 | test('「Hello World」が表示されている', () => { |
7 | const helloTestElement = screen.getByText('Hello World') |
8 | expect(helloTestElement).toBeInTheDocument() |
render()では、Appコンポーネントをレンダリングしていますscreen.getByText()ではHello Worldというテキストが表示されているかを確認していますexpect()ではhelloTestElementが画面に表示されていることを確認しています
テストの実行
それでは、ローカルでテストを実行してみましょう。次のコマンドを実行してください。
下図のように表示されたらテストは成功です。もし、失敗した場合はエラー内容を確認して修正することになります。
よく使用するスクリプトはpackage.jsonに記載しておくと便利です。scriptsに"test": "jest"を追加してください。
GitHub Actionsでテストを実行
続いて、GitHub Actionsでテストを実行するための設定ファイルを作成します。.github/workflowsディレクトリを作成し、その中にactions.ymlというファイルを作成します。
GitHub Actionsの公式サイトにあるチュートリアルを参考にテストを実行する設定を追加しました。
ファイルの作成が終わったら、リポジトリにプッシュします。
01 | name: Test GitHub Actions |
03 | run-name: ${{ github.actor }} is testing out GitHub Actions 🚀 |
09 | runs-on: ubuntu-latest |
11 | - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event." |
12 | - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!" |
13 | - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}." |
14 | - name: Check out repository code |
15 | uses: actions/checkout@v4 |
16 | - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner." |
17 | - run: echo "🖥️ The workflow is now ready to test your code on the runner." |
18 | - name: List files in the repository |
20 | ls ${{ github.workspace }} |
21 | - run: echo "🍏 This job's status is ${{ job.status }}." |
22 | - name: Install packages |
GitHubページにアクセスしてActionsタブを開くと進捗画面を確認できます。ジョブのTestを選択すると、下図のように詳細な出力画面が表示されます。
Run testsのステップを展開すると、ローカルマシン上で実行したテストと同じ結果が表示されます。
これにより、GitHub Actionsでテストが実行されるようになりました。
テストが失敗するケース
ここで、あえてテストが失敗するようにコードを修正してみます。App.test.tsxの末尾に次のコードを追加して保存します。
1 | test('「Good bye」が表示されている', () => { |
3 | const helloTestElement = screen.getByText('Good bye') |
4 | expect(helloTestElement).toBeInTheDocument() |
コミット＆プッシュするとGitHub Actionsでテストが実行されるので、結果を確認します。
失敗した際は画面上に「×」印が表示されます。また、折りたたまれているセクションを表示するとエラー内容が表示されます。
getBytext()の引数が画面上に存在しないGood byeになっているため、エラーが発生していることが確認できます。
おわりに
今回は、Webフロントエンド開発を例に、テストコードを書いてGitHub Actionsで実行するまでの流れを解説しました。GitHub Actionsには毎月無料枠があるので、ぜひCIの導入を試してみてください。
