Test react components in Rails with capybara/spinach

Question

I'm building a Rails app which uses React components for layouts, here you can see an example

.pure-g.homepage
  = react_component("SectionA", {foo: @bar}, class: "pure-u-1")
  = react_component("SectionB", {foo: @bar}, class: "pure-u-1")
  = react_component("SectionC", {foo: @bar, foo2: @bar2, foo3: @bar3}, class: "pure-u-1")

I'm triying to test this with spinach, but it's looks like the components aren't rendering in the test, i want to know if there's a way to test React components with spinach and if there is, what i'm missing?

Here's my rails_helper.rb

# This file is copied to spec/ when you run 'rails generate rspec:install'
require 'spec_helper'
ENV['RAILS_ENV'] ||= 'test'
require File.expand_path('../../config/environment', __FILE__)
# Prevent database truncation if the environment is production
abort("The Rails environment is running in production mode!") if Rails.env.production?
require 'capybara/poltergeist'
Capybara.javascript_driver = :poltergeist
# Add additional requires below this line. Rails is not loaded until this point!
require 'rspec/rails'
require 'support/factory_girl'

# Requires supporting ruby files with custom matchers and macros, etc, in
# spec/support/ and its subdirectories. Files matching `spec/**/*_spec.rb` are
# run as spec files by default. This means that files in spec/support that end
# in _spec.rb will both be required and run as specs, causing the specs to be
# run twice. It is recommended that you do not name files matching this glob to
# end with _spec.rb. You can configure this pattern with the --pattern
# option on the command line or in ~/.rspec, .rspec or `.rspec-local`.
#
# The following line is provided for convenience purposes. It has the downside
# of increasing the boot-up time by auto-requiring all files in the support
# directory. Alternatively, in the individual `*_spec.rb` files, manually
# require only the support files necessary.
#
# Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }
Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }
# Checks for pending migration and applies them before tests are run.
# If you are not using ActiveRecord, you can remove this line.
ActiveRecord::Migration.maintain_test_schema!

RSpec.configure do |config|
  config.include RSpecFeaturesHelper, type: :feature
  config.include Devise::TestHelpers, type: :controller
  config.include ControllerHelpers, type: :controller
  # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
  config.fixture_path = "#{::Rails.root}/spec/fixtures"

  # If you're not using ActiveRecord, or you'd prefer not to run each of your
  # examples within a transaction, remove the following line or assign false
  # instead of true.
  config.use_transactional_fixtures = false

  # RSpec Rails can automatically mix in different behaviours to your tests
  # based on their file location, for example enabling you to call `get` and
  # `post` in specs under `spec/controllers`.
  #
  # You can disable this behaviour by removing the line below, and instead
  # explicitly tag your specs with their type, e.g.:
  #
  #     RSpec.describe UsersController, :type => :controller do
  #       # ...
  #     end
  #
  # The different available types are documented in the features, such as in
  # https://relishapp.com/rspec/rspec-rails/docs
  config.infer_spec_type_from_file_location!

  # Filter lines from Rails gems in backtraces.
  config.filter_rails_from_backtrace!
  # arbitrary gems may also be filtered via:
  # config.filter_gems_from_backtrace("gem name")
  <ReactOnRails::TestHelper class="configure_rspec_to_compile_assets">
    <config></config>
  </ReactOnRails::TestHelper>
end

Answer 1

Capybara includes support for RSpec and Cucumber switching to the driver specified in Capybara.javascript_driver based on metadata specified on each test. It doesn't have any support for Spinach built-in though. If you want to be able to specify which driver gets used per test you will need to implement the equivalent of the two Cucumber before hooks implemented here - https://github.com/teamcapybara/capybara/blob/master/lib/capybara/cucumber.rb#L17 - for Spinach, and then specify that specific tests need JS. If you just want all the Capybara driven tests to use the JS capable driver, you should specify default_driver rather than javascript_driver

Capybara.default_driver = :poltergeist

Note: The current release version of PhantomJS - 2.1.1 (used by Poltergeist) only supports ES5 max, so for it to work well with React you need to make sure ALL your JS is getting transpiled to ES5 compatible. It is also limited in what CSS it supports, being basically equivalent to a 7 year old browser. A better (in terms of JS/CSS support) solution today is to use Chrome headless with selenium for testing which, if using the latest Capybara, can be specified with

Capybara.default_driver = :selenium_chrome_headless