[CircleCI 2.0] Rails 5.x + Webpacker Configuration Job Setup Method for Running Rspec Tests
I’ll introduce the job configuration method for running Rspec tests in Rails 5.x + Webpacker configuration on CircleCI 2.0.
Prerequisites
This is based on the following architecture:
- CircleCI 2.0 (Free plan)
- Rails 5.1.4
- Yarn 0.27.5
- Webpacker 3.0.2
.circleci/config.yml That Works on Free Plan
First, I’ll introduce the complete .circleci/config.yml.
Sample code for .circleci/config.yml that works on CircleCI 2.0’s free plan (just 1 container) is as follows:
.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
Points I Struggled With in .circleci/config.yml Configuration
Configuration for Using PostgreSQL
For PostgreSQL Docker configuration, I changed the .circleci/config.yml and config/database.yml settings as follows so that connections work with POSTGRES_USER: postgres, POSTGRES_DB: yourapp_test.
.circleci/config.yml Changes
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 Changes
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
Installing rspec_junit_formatter
The .circleci/config.yml sample file uses a gem called rspec_junit_formatter, but it wasn’t added to the Gemfile, causing a LoadError.
bundler: failed to load command: rspec
LoadError: cannot load such file -- rspec_junit_formatter
I addressed this by editing the Gemfile as follows and running bundle install.
Gemfile Changes
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
For this error, I’ve written the solution in a separate article, so please refer to it:
Building JavaScript Files
When managing JavaScript files with Webpacker, you need to build React.js|Vue.js|Angular.js files into .js files with bundle exec bin/webpack before running tests.
Otherwise, features tests using Capybara cannot load .js files and will all fail.
Adding yarn install
First, add configuration to run yarn (install) after bundle install.
Also, since we’re running yarn install, modify restore_cache and save_cache keys to include yarn.lock checksum as well.
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
Adding bundle exec bin/webpack
Add configuration to run bundle exec bin/webpack before test execution to build frontend JavaScript framework files.
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
With this, you can now run Rspec tests on CircleCI 2.0 with Rails 5.x + Webpacker configuration.
That’s all from the Gemba, where I want to use CircleCI 2.0 on the free plan.
Reference Information
That’s all from the Gemba.