[CircleCI 2.0] Rails 5.x + Webpacker 構成で Rspec テストを実行する job 設定方法

CircleCI 2.0 にて Rails 5.x + Webpacker の構成で Rspec テストを実行する job の設定方法をご紹介します。

前提

以下のアーキテクチャでお送りしています。

CircleCI 2.0 (無料プラン)
Rails 5.1.4
Yarn 0.27.5
Webpacker 3.0.2

無料プランで動く .circleci/config.yml

最初に .circleci/config.yml の完成形をご紹介します。

CircleCI 2.0 の無料プラン (container 1つだけ) でも動く .circleci/config.yml のサンプルコードは以下のとおりです。

.circleci/config.yml

version: 2
jobs:
  build:
    working_directory: ~/yourapp

    docker:
      # Web: Ruby
      - image: circleci/ruby:2.4.1-node-browsers
        environment:
          RACK_ENV: test
          RAILS_ENV: test
      # DB: PostgreSQL
      - image: circleci/postgres:9.4
        environment:
          POSTGRES_USER: postgres
          POSTGRES_DB: yourapp_test

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
          - yourapp-{{ checksum "Gemfile.lock" }}-{{ checksum "yarn.lock" }}
          # fallback to using the latest cache if no exact match is found
          - yourapp-

      - run:
          name: install dependencies
          command: |
            bundle install --jobs=4 --retry=3 --path vendor/bundle
      - run:
          name: install dependencies
          command: yarn

      - save_cache:
          key: yourapp-{{ checksum "Gemfile.lock" }}-{{ checksum "yarn.lock" }}
          paths:
            - ./vendor/bundle
            - ./node_modules

      # Database setup
      - run: bundle exec rake db:create
      - run: bundle exec rake db:schema:load

      # Build JavaScript files
      - run: bundle exec bin/webpack

      # run tests!
      - run:
          name: run tests
          command: |
            mkdir /tmp/test-results
            bundle exec rspec --format progress \\
                            --format RspecJunitFormatter \\
                            --out /tmp/test-results/rspec.xml \\
                            --format progress

      # collect reports
      - store_test_results:
          path: /tmp/test-results
      - store_artifacts:
          path: /tmp/test-results
          destination: test-results

.circleci/config.yml の設定で悩んだポイント

PostgreSQL を利用する設定

PostgreSQL 用の Docker の設定として POSTGRES_USER: postgres, POSTGRES_DB: yourapp_test で接続できるように .circleci/config.yml と config/database.yml の設定を以下の用に変更しました。

.circleci/config.yml 変更点

    docker:
      # Web: Ruby
      - image: circleci/ruby:2.4.1-node-browsers
        environment:
          RACK_ENV: test
          RAILS_ENV: test
      # DB: PostgreSQL
      - image: circleci/postgres:9.4
        environment:
          POSTGRES_USER: postgres
          POSTGRES_DB: yourapp_test

config/database.yml 変更点

config/database.yml
@@ -17,6 +17,8 @@
 default: &default
   adapter: postgresql
   encoding: unicode
+  host: localhost
+  user: postgres
   # For details on connection pooling, see Rails configuration guide

rspec_junit_formatter のインストール

.circleci/config.yml のサンプルファイルでは rspec_junit_formatter という gem を利用しているのに、Gemfile に追加してなかったので LoadError が発生しました。

bundler: failed to load command: rspec
LoadError: cannot load such file -- rspec_junit_formatter

以下のように Gemfile を編集して bundle install することで対応しました。

Gemfile 変更点

diff --git a/Gemfile b/Gemfile
index 0340012..0ef0a93 100644
--- a/Gemfile
+++ b/Gemfile
@@ -48,6 +48,8 @@ group :development, :test do
   gem 'rspec'
   # Rails 用 Rspec ライブラリ
   gem 'rspec-rails'
+  # RSpec results formatted as JUnit XML that your CI can read
+  gem 'rspec_junit_formatter'

NoMethodError: undefined method `captures' for nil:NilClass

このエラーについては別途、以下の記事に解決方法を書きましたので、こちらをご参考ください。

bundler: failed to load command: rspec ~ NoMethodError: undefined method `captures' for nil:NilClass エラーの解決方法

JavaScript ファイルをビルドする

Webpacker で JavaScript ファイルを管理している場合、テスト実行前に bundle exec bin/webpack で React.js|Vue.js|Angular.js のファイルを .js ファイルに build してあげる必要があります。

そうしないと、Capybara を使った features テストは .js ファイルを load できず、全て fail してしまいます。

yarn install 追加

まず、bundle install 後に yarn (install) を実行する設定を追記します。

併せて、yarn install するので、restore_cache, save_cache の key に yarn.lock の checksum も含めるように修正します。

diff --git a/.circleci/config.yml b/.circleci/config.yml
index c3e8881..df4a66d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -25,7 +25,7 @@ jobs:
       # Download and cache dependencies
       - restore_cache:
           keys:
-          - yourapp-{{ checksum "Gemfile.lock" }}
+          - yourapp-{{ checksum "Gemfile.lock" }}-{{ checksum "yarn.lock" }}
           # fallback to using the latest cache if no exact match is found
           - yourapp-
 
@@ -33,11 +33,15 @@ jobs:
           name: install dependencies
           command: |
             bundle install --jobs=4 --retry=3 --path vendor/bundle
+      - run:
+          name: install dependencies
+          command: yarn
 
       - save_cache:
-          key: yourapp-{{ checksum "Gemfile.lock" }}
+          key: yourapp-{{ checksum "Gemfile.lock" }}-{{ checksum "yarn.lock" }}
           paths:
             - ./vendor/bundle
+            - ./node_modules
 
       # Database setup

bundle exec bin/webpack 追加

テスト実行前に、フロントエンド JavaScript フレームワークのファイルを build するために bundle exec bin/webpack を実行する設定を追加します。

diff --git a/.circleci/config.yml b/.circleci/config.yml
index e5a0f8b..c3e8881 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -43,6 +43,9 @@ jobs:
 
+      # Build JavaScript files
+      - run: bundle exec bin/webpack
+
       # run tests!
       - run:
           name: run tests

これで、CircleCI 2.0 で Rails 5.x + Webpacker な構成で Rspec テストを実行できるようになりました。

以上、CircleCI 2.0 を無料プランで使いたい、現場からお送りしました。

参考情報

2.0 Documentation - CircleCI