Github Actions RSpec, Jestの設定メモ

初学者がGithub ActionsでRSpec, Jestを設定した時の備忘録です。

環境

macOS Monterey 12.3.1
Rails 6.1.6
Ruby 3.1.2
React 18.1.0
Node 16.15

0. ディレクトリ構成

現在のディレクトリ構成は以下の通り。

myapp/
┣ backend/ # Railsアプリ
┗ frontend/
┗ app/ # Reactアプリ

1. ymlファイルの作成

以下の構成でディレクトリ、ファイルを作成する。

myapp/
┣ .github/ # 作成
┃ ┗ workflow/　# 作成
┃ ┗ test.yml　# 作成 (任意のファイル名)
┣ backend/
┗ frontend/
┗ app/

2. RSpecの設定

こちらを参考にして作成しました。

test.yml

name: Test

on:
  pull_request:
    branches:
      - main # mainブランチに向けたプルリクエスト作成時に実行

jobs:
  rspec:
    name: RSpec
    runs-on: ubuntu-latest
    env:
      RAILS_ENV: test
    defaults:
      run:
        working-directory: backend # ディレクトリを指定 (runに適用される)
    services:
      mysql:　 # テスト用データベースの設定
        image: mysql:8.0.29
        ports:
          - 3306:3306
        env:
          MYSQL_ALLOW_EMPTY_PASSWORD: yes # パスワード空を許可
          BIND-ADDRESS: 0.0.0.0
        options: --health-cmd "mysqladmin ping" --health-interval 10s --health-timeout 5s --health-retries 10 #ヘルスチェック
    steps:
      - uses: actions/checkout@v3
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: "3.1.2"
          bundler-cache: true # キャッシュの設定
          working-directory: backend # ディレクトリを指定 (ここでも指定しないとキャッシュされない)
      - name: Run migration
        run: |
          cp config/database.yml.ci config/database.yml
          bundle exec rails db:create
          bundle exec rails db:migrate
      - name: Run RSpec
        run: bundle exec rspec

steps:以下は各リポジトリのページを参考にしました。

bundler-cache: trueを設定するとbundle installまで実行してくれます。

合わせてconfig/database.yml.ciを作成しました。

database.yml.ci

test:
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: # 空
  host: 127.0.0.1
  database: myapp_test

3. Jestの設定

公式Docsを参考にして作成しました。

test.yml

...
# RSpecの下に追加

  jest:
    name: Jest
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend/app # ディレクトリを指定
    steps:
      - uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "16.15"
          cache: "yarn"
          cache-dependency-path: "frontend/app/package.json" # ファイルのパスを指定
      - name: Install dependencies
        run: yarn install
      - name: Run Jest
        run: yarn run test

設定ファイルをgithubへプッシュし、プルリクエスト作成するとRSpec, Jestが実行されました。
今後はfrontend, backendの片方を編集した時に、対応したテストのみが実行されるように修正しようと思います。