如何编写与 React 表单交互的 rspec 测试答案

【问题标题】：How to write an rspec test that interacts with a React form如何编写与 React 表单交互的 rspec 测试
【发布时间】：2021-08-20 17:56:10
【问题描述】：

我首先要说我可能会以错误的方式解决这个问题，并且我愿意接受其他测试方式。

我有一个 Rails/React 应用程序，我正在尝试添加更多测试。在此之前我已经编写了 rspec 测试，完全包含在后端检查内容。现在我正在尝试编写一个测试来检查创建博客文章。当我测试的表单是 Rails 视图时，我曾经这样做过，但是当表单在前端的 React 中构建时，我从未这样做过。

这是我的 gem 文件：

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.2'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.3'
# Use postgresql as the database for Active Record
gem 'pg', '~> 1.1'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false


# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

# CSS style
gem "bulma-rails", "~> 0.8.0"

# jquery
gem 'jquery-rails'

# Setup Devise
gem 'devise'
gem 'active_model_serializers'

# Install pry for debugging
gem 'pry'

# Sendgrid/Contact form
gem 'sendgrid-ruby'
gem 'mail_form'

# Env variable management
gem 'figaro', '~> 1.2'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'factory_bot_rails', '~> 6.2'
  gem 'rspec-rails', '~> 5.0', '>= 5.0.2'
  gem 'faker', '~> 2.18'
  gem 'launchy'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 3.35', '>= 3.35.3'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

这是我的测试：

require 'rails_helper'

feature 'user signs in', %Q{
  As an admin user
  I want to create new posts
  when I am signed in
} do

  scenario 'admin creates new blog post', js: true do
    user = FactoryBot.create(:user_1)
    post = FactoryBot.create(:post_1)
    visit '/post/new'
    
    # binding.pry
    fill_in 'title', with: post.title
    fill_in 'body', with: post.body
    fill_in 'image', with: post.image
    fill_in 'keywords', with: post.keywords
    binding.pry

    click_button 'Submit'
    binding.pry
    expect(page).to have_content(post.title)
  end

end

我一直在使用 binding.pry 和 save_and_open_page 来尝试弄清楚发生了什么。到达/post/new 并正确填写表格。这样零件就可以工作了。但是当它点击Submit时，就会出现这个错误：

[1] pry(#<RSpec::ExampleGroups::UserSignsInAsAnAdminUserIWantToCreateNewPostsWhenIAmSignedIn>)> 2021-08-20 13:51:45 -0400 Rack app ("GET /" - (127.0.0.1)): #<ActionController::UnknownFormat: HomepagesController#index is missing a template for this request format and variant.

request.formats: ["application/json"]
request.variant: []>

我不确定这里发生了什么。我猜我错过了配置的某些部分以使该测试的 JS 方面正常工作？另外需要注意的是，这种形式在开发/生产中确实有效。表单中的数据应该发送到 Posts Controller。

实现此功能的替代选项。为后端内容编写响应测试是否更有意义。然后只是 Jest 或其他库来测试前端功能？

【问题讨论】：

标签： ruby-on-rails selenium-webdriver rspec rspec-rails

【解决方案1】：

您的表单正在提交，但您的 Home 控制器中的格式不正确。在 index 方法中，您应该添加您希望控制器如何处理 js 格式。

你能确保你的方法像这样处理 html 和 json：

respond_to do |format|
  format.html # index.html.erb
  format.json { render json: @whatever_you_want_to_return }
end

至于测试，您的测试很好，但您应该始终测试应用程序的所有部分，以确保它们返回您想要的结果。

【讨论】：