与Rails,带有React Component的Capybara的集成测试

皮兹

我已经创建了一个小支架来使用Rails创建帖子,但是erb使用标准表单创建了一个简单的React Component(我使用gem react-railsbrowserify-rails)。

您可以在此处找到包含所有源代码的示例仓库

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组件中显示提交按钮(正在删除),则测试成功通过。

那么,有没有一种方法可以使该测试与此设置和React组件一起工作?

托马斯·沃尔波尔

您在这里有几个问题。首先是您实际上并没有使用具有JS功能的驱动程序来运行测试。您已经配置poltergeist为可以与Capybara一起使用,但是您从未告诉过Capybara是否要通过设置来用于特定测试Capybara.current_driver-请参阅https://github.com/teamcapybara/capybara#using-capybara-with-minitest添加Capybara.current_driver = Capybara.javascript_driver测试失败会提出您的下一个问题。

PhantomJS(由Poltergeist使用)目前不支持ES5.1 + JS或现代CSS,因此,如果要使用它,则需要填充并转换回ES5级别。如果您停止在Poltergeist配置(js_errors: true)中隐藏JS错误,这将立即变得清晰因此,最初的错误是您的代码使用的Map是直到ES6 / 2015才添加类,因此Poltergeist不支持该类(无polyfill)。

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

Capybara.javascript_driver = :selenium # or :selenium_chrome

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

带有配置文件的Spring集成测试

带有模拟服务/组件的Spring Boot集成测试

.env未在带有rspec的Rails的测试环境中加载

React-redux:如何编写集成测试

带有集成测试的sbt组装

带有承诺和单元/集成测试的异步Javascript

React前端与Django REST后端的集成测试

无法在Rails集成测试中设置标题

Rails Cucumber使用Capybara测试AJAX

react redux redux-saga的集成测试

具有流利验证的集成测试API

React Router渲染组件带有/:username或/ component /

带有React Component的SharePoint框架加载图像

测试带有功能的React Components setState重载

如何使用React测试库获取带有testid的元素?

测试输入带有React测试库的搜索框

带有弹簧集成的Struts 2.5 Junit测试设置

带有高级功能的TinyMCE的Rails集成未显示所有工具按钮

通过Ruby on Rails中的Test :: Unit和Capybara与Java集成测试

为什么带有后期请求的集成测试失败?

分页集成测试(Ruby on Rails)

带有子域,RSpec和capybara-webkit的Rails集成测试(适用于JavaScript)

带有Capybara的Rails验证和错误消息

使用带有Rspec的Rails在模型中测试验证

Rails 集成测试:Capybara 是否需要与 Javascript 交互?

Rails 4:在 Capybara 和 Poltergeist 集成测试中存根

用于 Swagger 测试的带有 Apivore 的 Rails RSpec

React 测试库 getByLabelText -带有特殊字符的标签

Capybara 集成视图测试未读取正确的数据 - ruby on rails