GitHub ActionsでJestを実行してテスト結果をWebhookでSlackに通知してみた

githubactions-jest/
├── .github/
│   └── workflows/
│       └── test.yml  # GitHub Actionsの設定ファイル
├── src/
│   ├── calculator.ts  # テスト対象のコード
│   └── calculator.test.ts  # テストコード
├── .gitignore
├── jest.config.js
├── package.json
└── tsconfig.json

# プロジェクトの初期化
npm init -y

# TypeScript+Jestのテスト環境をインストール
npm install --save-dev typescript jest ts-jest @types/jest

# TypeScriptの設定ファイル生成
npx tsc --init

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/*.test.ts'],
};

{
  "scripts": {
    "build": "tsc",
    "test": "jest"
  }
}

/**
 * 2つの数値を足し算します
 */
export function add(a: number, b: number): number {
  return a + b;
}

/**
 * 2つの数値の引き算を行います
 */
export function subtract(a: number, b: number): number {
  return a - b;
}

/**
 * 2つの数値の掛け算を行います
 */
export function multiply(a: number, b: number): number {
  return a * b;
}

/**
 * 2つの数値の割り算を行います
 */
export function divide(a: number, b: number): number {
  return a / b;
}

import { add, subtract, multiply, divide } from './calculator';

describe('Calculator', () => {
  test('2つの数値を足し算できる', () => {
    expect(add(1, 2)).toBe(3);
    expect(add(5, -3)).toBe(2);
  });

  test('2つの数値を引き算できる', () => {
    expect(subtract(5, 2)).toBe(3);
    expect(subtract(5, -3)).toBe(8);
  });

  test('2つの数値を掛け算できる', () => {
    expect(multiply(3, 4)).toBe(12);
    expect(multiply(3, -4)).toBe(-12);
  });

  test('2つの数値を割り算できる', () => {
    expect(divide(10, 2)).toBe(5);
    expect(divide(10, -2)).toBe(-5);
  });

  // わざと失敗するテスト
  // test('このテストは失敗します', () => {
  //   expect(add(1, 1)).toBe(3); // 1 + 1 = 2 なので、3を期待すると失敗する
  // });
});

# テストを実行してSlackに通知するワークフロー
name: Jest Tests and Notify Slack

on:
  workflow_dispatch:  # 手動でワークフローを実行するためのトリガー

jobs:
  test:
    runs-on: ubuntu-latest  # Ubuntu最新版で実行
    environment: dev  # 環境変数やシークレットを取得する環境を指定

    steps:
    - name: Checkout code  # リポジトリのコードをチェックアウト
      uses: actions/checkout@v4

    - name: Set up Node.js  # Node.jsのセットアップ
      uses: actions/setup-node@v4
      with:
        node-version: '20'  # Node.js v20を使用
        cache: 'npm'  # npmのキャッシュを有効化して高速化

    - name: Install dependencies  # 依存関係のインストール
      run: npm ci  # クリーンインストール（package-lock.jsonを厳密に使用）

    - name: Build TypeScript  # TypeScriptのビルド
      run: npm run build

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

    - name: Notify Slack  # テスト結果をSlackに通知
      if: always()  # テストが成功しても失敗しても常に実行
      uses: slackapi/slack-github-action@v2.0.0  # Slack通知用のアクション
      with:
        webhook: ${{ vars.SLACK_WEBHOOK_URL }}  # SlackのWebhook URL（環境変数から取得）
        webhook-type: incoming-webhook  # Webhookタイプ
        payload: |  # Slackに送信するペイロード
          text: "Test ${{ job.status == 'success' && 'Success' || 'Failed' }}"  # フォールバックテキスト
          blocks:  # Slackのブロックキット形式でメッセージを構成
            - type: "section"  # セクションブロック：テスト結果のステータス表示
              text:
                type: "mrkdwn"
                text: "${{ job.status == 'success' && ':white_check_mark:' || ':x:' }} Test Result：${{ job.status == 'success' && 'Success' || 'Failure' }}"
            - type: "divider"  # 区切り線
            - type: "section"  # リポジトリ情報表示
              fields:
                - type: "mrkdwn"
                  text: "*リポジトリ:*\n${{ github.repository }}"
            - type: "section"  # ブランチ情報表示
              fields:
                - type: "mrkdwn"
                  text: "*ブランチ:*\n${{ github.ref_name }}"
            - type: "section"  # 実行者情報表示
              fields:
                - type: "mrkdwn"
                  text: "*実行者:*\n${{ github.actor }}"
            - type: "actions"  # アクションブロック：ボタンを表示
              elements:
                - type: "button"  # ワークフロー詳細へのリンクボタン
                  text:
                    type: "plain_text"
                    text: "ワークフロー詳細"
                  url: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"

  // わざと失敗するテスト
  test('このテストは失敗します', () => {
    expect(add(1, 1)).toBe(3); // 1 + 1 = 2 なので、3を期待すると失敗する
  });

# Jest テストを実行し、結果をSlackに通知するワークフロー
name: Jest Tests and Notify Slack

on:
  workflow_dispatch:  # 手動でワークフローを実行するためのトリガー

jobs:
  test:
    runs-on: ubuntu-latest  # Ubuntu最新版の仮想環境で実行
    environment: dev  # 環境変数やシークレットを取得する環境を指定

    steps:
    - name: Checkout code  # リポジトリのコードをチェックアウト
      uses: actions/checkout@v4

    - name: Set up Node.js  # Node.js環境のセットアップ
      uses: actions/setup-node@v4
      with:
        node-version: '20'  # Node.js v20を使用
        cache: 'npm'  # npmのキャッシュを有効化してビルド高速化

    - name: Install dependencies  # 依存パッケージのインストール
      run: npm ci  # クリーンインストール（package-lock.jsonを厳密に使用）

    - name: Build TypeScript  # TypeScriptのビルドプロセス実行
      run: npm run build

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

    - name: Slack Notification  # テスト結果をSlackに通知
      uses: rtCamp/action-slack-notify@v2.2.0  # Slack通知用のアクション
      if: always()  # テストの成功/失敗に関わらず常に通知を送信
      env:
        SLACK_WEBHOOK: ${{ vars.SLACK_WEBHOOK_URL }}  # SlackのWebhook URL（環境変数から取得）
        SLACK_COLOR: ${{ job.status == 'success' && 'good' || 'danger' }}  # 成功時は緑、失敗時は赤
        SLACK_ICON: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png  # 通知アイコン
        SLACK_USERNAME: GitHub Actions Notifier  # 通知の送信者名
        SLACK_TITLE: "${{ job.status == 'success' && ':white_check_mark:' || ':x:' }} テスト結果：${{ job.status == 'success' && '成功' || '失敗' }}"  # 通知タイトル
        SLACK_MESSAGE: |  # 通知本文（複数行）
          *リポジトリ:* ${{ github.repository }}  # リポジトリ名を表示
          *ブランチ:* ${{ github.ref_name }}  # ブランチ名を表示
          *実行者:* ${{ github.actor }}  # ワークフロー実行者を表示

          <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|ワークフロー詳細>  # ワークフロー実行へのリンク
        SLACK_FOOTER: ""  # フッターは空に設定
        MSG_MINIMAL: "true"  # リファレンスとイベント情報を非表示に設定