使用 Rails 进行集成测试，Capybara 使用 React 组件答案

【问题标题】：Integration test with Rails, Capybara with React Component使用 Rails 进行集成测试，Capybara 使用 React 组件
【发布时间】：2018-04-17 08:43:46
【问题描述】：

我已经创建了一个小脚手架，用于使用 Rails 创建帖子，但使用 erb 的标准表单我创建了一个简单的 React 组件（我使用 gem react-rails 和 browserify-rails）。

您可以找到包含所有源代码的示例 repo here！

React 组件如下所示：

class NewPostForm extends React.Component {

  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return(
      <form action="/posts" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="✓"/>
        <input type="hidden" name="authenticity_token" value={this.props.authenticityToken}/>

        <div className="field">
          <label for="post_title">Title</label>
          <input type="text" name="post[title]" id="post_title" onChange={(e) => this.setState({title: e.target.value})} />
        </div>

        <div className="field">
          <label for="post_body">Body</label>
          <textarea name="post[body]" id="post_body" onChange={(e) => this.setState({body: e.target.value})}></textarea>
        </div>

        { this.state.title &&
          <div class="actions">
            <input type="submit" name="commit" value="Create Post" data-disable-with="Create Post"/>
          </div>
        }
      </form>
    )
  }

}

请注意，只有在填充了标题输入字段时，才会将提交按钮添加到 DOM。

文件app/views/posts/_form.html.erb是这样的：

<%= react_component 'NewPostForm', {authenticityToken: form_authenticity_token.to_s}, {prerender: true} %>

现在我已经创建了这个使用 Capybara 的集成测试：

require 'test_helper'

class PostCreationTest < ActionDispatch::IntegrationTest

  test "post creation" do
    visit new_post_path
    fill_in 'post[title]', with: 'Big News'
    fill_in 'post[body]', with: 'Superman is dead!'
    click_button 'Create Post' # <=== DO NOT FIND THIS BUTTON CAUSE IS ADDED WITH REACT
    assert page.has_content?('Post was successfully created.')
  end

end

测试失败并出现此错误：

Run options: --seed 21811

# Running:

E

Error:
PostCreationTest#test_post_creation:
Capybara::ElementNotFound: Unable to find visible button "Create Post"
    test/integration/post_creation_test.rb:9:in `block in <class:PostCreationTest>'


bin/rails test test/integration/post_creation_test.rb:5

在 test_helper.rb 中，我已将 Capybara 配置为使用 poltergeist 驱动程序。

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, {
    js_errors: false,
    phantomjs_options: ['--ignore-ssl-errors=yes', '--ssl-protocol=any'],
    debug: false,
    timeout: 500,
    phantomjs: File.absolute_path(Phantomjs.path)
  })
end
Capybara.javascript_driver = :poltergeist
Capybara.server_port = 3001

如果我在反应组件中始终显示提交按钮（删除{ this.state.title &&），则测试成功通过。

那么，有没有办法让这个测试与这个设置和 React 组件一起工作？

【问题讨论】：

超人没有死。

标签： ruby-on-rails reactjs capybara integration-testing

【解决方案1】：

这里有几个问题。首先是您实际上并没有使用支持 JS 的驱动程序运行您的测试。您已配置 poltergeist 与 Capybara 一起使用，但您从未通过设置 Capybara.current_driver 告诉 Capybara 使用 if 进行特定测试 - 请参阅 https://github.com/teamcapybara/capybara#using-capybara-with-minitest 为失败的测试添加 Capybara.current_driver = Capybara.javascript_driver 会引发您遇到的下一个问题。

PhantomJS（由 Poltergeist 使用）目前不支持 ES5.1+ JS 或现代 CSS，所以如果你想使用它，你需要 polyfill 并转译回 ES5 级别。如果您停止在 Poltergeist 配置 (js_errors: true) 中隐藏 JS 错误，这一点会立即变得清晰。因此，最初的错误是您的代码使用了 Map 类，该类直到 ES6/2015 才添加，因此 Poltergeist（没有 polyfill）不支持它。

作为 Capybara JS 测试的初学者，您可能最好先使用 selenium 开始需要测试的 JS（这样您就可以确切地看到正在发生的事情并支持现代 JS/CSS），然后当测试正常工作时可能会留下来带有硒和无头镀铬或无头 FF。

Capybara.javascript_driver = :selenium # or :selenium_chrome

【讨论】：