React / GitHub Actions を使用した自動テストの設定手順

このガイドでは、GitHub Actions を使って特定のブランチ（例: feature/new-feature-test-ci）に変更がマージされた際に自動でテストを実行する方法を説明します。

---

1. GitHub Actions とは

GitHub Actions は、GitHub リポジトリでコードのビルド、テスト、自動化を行う CI/CD ツールです。リポジトリ内に設定ファイルを追加するだけで、自動テストやデプロイを行うワークフローを構築できます。

---

2. プロジェクトの準備

必要なツール

• Node.js プロジェクトが既に設定されていること。
• テストコマンド（例: npm run test）が正常に動作すること。

---

3. ワークフローの設定

ファイル作成

1. リポジトリのルートディレクトリに .github/workflows フォルダを作成します。
2. test.yml ファイルを作成します。

ファイル内容

以下の内容を test.yml に記述します。

name: Run Tests on Push

on:
  push:
    branches:
      - feature/new-feature-test-ci # このブランチへのプッシュまたはマージ時に実行

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      # ソースコードをチェックアウト
      - name: Checkout repository
        uses: actions/checkout@v3

      # Node.js のセットアップ
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18 # 必要なNode.jsのバージョン

      # 必要な依存関係をインストール
      - name: Install dependencies
        run: npm install

      # テストを実行
      - name: Run tests
        run: npm run test

---

4. 設定ファイルの説明

• on.push.branches:
  • feature/new-feature-test-ci ブランチへのプッシュまたは他のブランチからのマージをトリガーにします。
• runs-on:
  • テストを実行する仮想マシン環境を指定します（ここでは最新の Ubuntu）。
• actions/checkout:
  • リポジトリのコードを CI 環境にクローンします。
• actions/setup-node:
  • Node.js のバージョンを指定してインストールします。
• npm install:
  • package.json に記載された依存関係をインストールします。
• npm run test:
  • テストを実行します。

---

5. テストの確認方法

ワークフローの動作確認

1. プッシュまたはマージを行う
   • feature/new-feature-test-ci ブランチに変更をプッシュするか、プルリクエストをマージします。
2. GitHub Actions を確認
   • リポジトリの「Actions」タブに移動し、Run Tests on Push ワークフローが実行されていることを確認します。

成功例

テストが正常に実行されると以下のようなステータスが表示されます：

• Actions タブ: 実行されたワークフローが ✓ マークで表示されます。
• プルリクエスト: 成功ステータスが確認できます。

---

6. 問題が発生した場合のトラブルシューティング

エラー例と対策

1. 依存関係のインストールエラー

   • エラーログで必要なパッケージが見つからない場合、package.json を確認し、必要な依存関係をインストールして再度コミットします。

2. テストスクリプトが実行されない

   • package.json の scripts に test が正しく定義されているか確認してください。

   {
     "scripts": {
       "test": "vitest"
     }
   }
   

3. Node.js バージョンの不一致

   • プロジェクトで使用している Node.js のバージョンと setup-node の設定が一致しているか確認してください。

---

7. 補足情報

• プルリクエストのみに適用する場合
  以下のように on.push を on.pull_request に変更します。

  on:
    pull_request:
      branches:
        - feature/new-feature-test-ci
  

• 他のブランチでも同じ設定を使用する場合
  branches にブランチ名を追加するか、branches-ignore を使用して除外するブランチを指定します。

---

これで GitHub Actions を使った自動テストの設定が完了しました。これにより、コードの変更が feature/new-feature-test-ci ブランチにプッシュまたはマージされると、テストが自動的に実行されます。