Integration testing React with a Rails API using RSpec

capybara.rb

require 'capybara/rspec'
require 'capybara/rails'
require 'capybara-screenshot/rspec'

class WarningSuppressor
  IGNORES = [
    /QFont::setPixelSize: Pixel size <= 0/,
    /CoreText performance note:/,
    /WebRTC-capable/
  ]

  class << self
    def write(message)
      if suppress?(message) then 0 else puts(message);1;end
    end

    private

    def suppress?(message)
      IGNORES.any? { |re| message =~ re }
    end
  end
end

Capybara.app_host = "http://localhost:3000"
Capybara.default_wait_time = 5

Capybara::Screenshot.webkit_options = {
  width: 1024,
  height: 768
}

Capybara::Screenshot.autosave_on_failure = false
Capybara::Screenshot.prune_strategy = :keep_last_run

RSpec.configure do |config|
  config.after do |example|
    if example.metadata[:type] == :feature and example.metadata[:js] and example.exception.present?
      Capybara::Screenshot.screenshot_and_open_image
    end
  end
end

Gemfile

...
  
group :test do
  gem 'capybara', '~> 2.4.4'
  gem 'capybara-screenshot', '~> 1.0.11'
  gem 'database_cleaner'
  gem 'launchy', '~> 2.4.3'
  gem 'rspec-rails'
  gem 'selenium-webdriver'
end

Procfile-react-test

web: cd clients/vanilla-web && yarn start
api: RAILS_ENV=test bundle exec rails s -p 3001

selenium.rb

begin
  require 'selenium/webdriver'
  require 'capybara/rspec'

  Capybara.register_driver :selenium do |app|
    options = Selenium::WebDriver::Chrome::Options.new(
      args: %w[headless disable-gpu no-sandbox]
    )
    Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
  end

  Capybara.javascript_driver = :selenium
rescue LoadError
end

signups_spec.rb

require 'rails_helper'

RSpec.feature "Signups", type: :feature, js: true do

  scenario "Visitor signs up for a new account" do
    visit("/signup")
    fill_in "name", with: "Bob"
    fill_in "email", with: "[email protected]"
    fill_in "password", with: "password"
    click_button "Create Account"
    expect(page).to have_text("Logout Bob")
  end

end