用 capybara/spinach 测试 Rails 中的反应组件

Question

我正在构建一个使用 React 组件进行布局的 Rails 应用程序，您可以在此处查看示例

.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")

我正在尝试用菠菜来测试它，但看起来这些组件没有在测试中呈现，我想知道是否有一种方法可以用菠菜来测试 React 组件，如果有的话，我该怎么办失踪了吗？

这是我的 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 支持 RSpec 和 Cucumber 根据每个测试指定的元数据切换到 Capybara.javascript_driver 中指定的驱动程序。不过，它不支持内置的 Spinach。如果您希望能够指定每个测试使用哪个驱动程序，您需要在此处实现的钩子之前实现两个 Cucumber 的等价物 - https://github.com/teamcapybara/capybara/blob/master/lib/capybara/cucumber.rb#L17 - 对于 Spinach，然后指定特定测试需要 JS。如果您只想让所有 Capybara 驱动的测试都使用支持 JS 的驱动程序，您应该指定 default_driver 而不是 javascript_driver

Capybara.default_driver = :poltergeist

注意：PhantomJS 的当前发布版本 - 2.1.1（由 Poltergeist 使用）仅支持 ES5 max，因此要使其与 React 配合良好，您需要确保所有 JS 都被转译为 ES5 兼容。它支持的 CSS 也有限，基本上相当于一个 7 岁的浏览器。今天更好的（就 JS/CSS 支持而言）解决方案是使用 Chrome headless with selenium 进行测试，如果使用最新的 Capybara，可以指定

Capybara.default_driver = :selenium_chrome_headless

用 capybara/spinach 测试 Rails 中的反应组件

Test react components in Rails with capybara/spinach

testing

ruby-on-rails

capybara

spinach

reactjs