テストコードを書いて「GitHub Actions」でCIを実行してみよう

はじめに

第22回では「GitHub Actions」でCI/CDの基本について学びました。今回は、Webフロントエンド開発を例に、テストコードを書いてGitHub Actionsで実行するまでの流れを解説します。

事前準備

さっそく、開発環境の準備から始めましょう。今回はDev Containersを使って構築します。詳しい手順については、第19回を参照してください。

まず、npm init viteコマンドを実行してプロジェクトを作成します。プロジェクト直下で実行したいところですが、何らかのファイルが既に存在しているとコマンド実行がエラーになります。そのため、my-appディレクトリ内に1度作成してから移動しています。

npm init vite my-app -- --template react-ts

コマンドの実行が完了すると、次のようにプロジェクトが作成されます。

my-app/
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── public
├── README.md
├── src
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

ディレクトリ移動後は、次のようになります。

.
├── .devcontainer
├── .eslintrc.cjs
├── .github
├── .gitignore
├── index.html
├── package.json
├── public
├── README.md
├── src
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

プロジェクトが作成されていることが確認できたらアプリケーションを起動(npm run dev)しますが、先にパッケージをインストール(npm install)しておきましょう。

npm install
npm run dev

下図のようなシンプルなカウンターアプリが表示されたら成功です。

テストツールのインストール

今回は「Jest」と「Testing Library」を使って自動テストを作っていきます。次のコマンドを実行して、必要なパッケージをインストールしましょう。

npm install --save-dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

jest.config.jsonをプロジェクト直下に作成し、次の内容を記載して保存します。

{
  "roots": [
    "	<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  "testEnvironment": "jsdom"
}

テスト対象のコード作成

今回は、既に作成されているファイルを少し編集してアプリケーションのコードとします。src/App.tsxのファイルを開くといろいろ書かれていますが、次のコードのようにシンプルにします。

function App() {
  return (
    <h1>Hello World</h1>
  )
}

export default App

テストコード作成

次のテストコードを作成します。通常の開発ではtestsディレクトリにまとめたりもしますが、今回は1ファイルだけなのでsrc/ディレクトリに作成します。

App.test.tsxというファイルを作成して、次の内容を記載してから保存します。

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import App from './App'

test('「Hello World」が表示されている', () => {
  render(<App />)
  const helloTestElement = screen.getByText('Hello World')
  expect(helloTestElement).toBeInTheDocument()
})

• render()では、Appコンポーネントをレンダリングしています
• screen.getByText()ではHello Worldというテキストが表示されているかを確認しています
• expect()ではhelloTestElementが画面に表示されていることを確認しています

テストの実行

それでは、ローカルでテストを実行してみましょう。次のコマンドを実行してください。

npx jest

下図のように表示されたらテストは成功です。もし、失敗した場合はエラー内容を確認して修正することになります。

よく使用するスクリプトはpackage.jsonに記載しておくと便利です。scriptsに"test": "jest"を追加してください。

{
    "scripts": {
        "test": "jest"
    }
}

GitHub Actionsでテストを実行

続いて、GitHub Actionsでテストを実行するための設定ファイルを作成します。.github/workflowsディレクトリを作成し、その中にactions.ymlというファイルを作成します。

GitHub Actionsの公式サイトにあるチュートリアルを参考にテストを実行する設定を追加しました。

ファイルの作成が終わったら、リポジトリにプッシュします。

name: Test GitHub Actions

run-name: ${{ github.actor }} is testing out GitHub Actions 🚀

on: [push]

jobs:
  Test:
    runs-on: ubuntu-latest
    steps:
      - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
      - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
      - name: Check out repository code
        uses: actions/checkout@v4
      - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
      - name: List files in the repository
        run: |
          ls ${{ github.workspace }}
      - run: echo "🍏 This job's status is ${{ job.status }}."
      - name: Install packages
        run: |
          npm ci
      - name: Run tests
        run: |
          npm test

GitHubページにアクセスしてActionsタブを開くと進捗画面を確認できます。ジョブのTestを選択すると、下図のように詳細な出力画面が表示されます。

Run testsのステップを展開すると、ローカルマシン上で実行したテストと同じ結果が表示されます。

これにより、GitHub Actionsでテストが実行されるようになりました。

テストが失敗するケース

ここで、あえてテストが失敗するようにコードを修正してみます。App.test.tsxの末尾に次のコードを追加して保存します。

test('「Good bye」が表示されている', () => {
  render(<App />)
  const helloTestElement = screen.getByText('Good bye')
  expect(helloTestElement).toBeInTheDocument()
})

コミット＆プッシュするとGitHub Actionsでテストが実行されるので、結果を確認します。

失敗した際は画面上に「×」印が表示されます。また、折りたたまれているセクションを表示するとエラー内容が表示されます。

getBytext()の引数が画面上に存在しないGood byeになっているため、エラーが発生していることが確認できます。

おわりに

今回は、Webフロントエンド開発を例に、テストコードを書いてGitHub Actionsで実行するまでの流れを解説しました。GitHub Actionsには毎月無料枠があるので、ぜひCIの導入を試してみてください。