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

2024年7月12日(金)
石本 達也
実践編第7回の今回は、Webフロントエンド開発を例に、テストコードを書いて「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の導入を試してみてください。

日本仮想化技術株式会社
Sierやベンチャー企業を経て、現在は日本仮想化技術でDevOps支援サービス「かんたんDevOps」のDev側を担当。「DevOpsを通じて開発者体験を最大化する」をミッションに理想的な開発環境の実現を目指して技術調査や仕組み作りを行っている。

連載バックナンバー

設計/手法/テスト技術解説
第25回

AWSの監視サービス「CloudWatch」でサーバー監視を試してみよう

2024/8/9
本連載も今回で最終回となります。今回は、AWSの監視サービス「CloudWatch」を使って、簡単なサーバー監視を試してみましょう。
設計/手法/テスト技術解説
第24回

CI環境を構築して「ESLint」で静的解析を実行してみよう

2024/7/26
実践編第8回の今回は、「Dev Containers」でCI環境を構築し、静的解析ツール「ESLint」で静的解析を実行するまでの流れを解説します。
設計/手法/テスト技術解説
第23回

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

2024/7/12
実践編第7回の今回は、Webフロントエンド開発を例に、テストコードを書いて「GitHub Actions」でCIを実行するまでの流れを解説します。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています