[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
このエラーについては別途、以下の記事に解決方法を書きましたので、こちらをご参考ください。
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 を無料プランで使いたい、現場からお送りしました。