title: Integration test with Rails, Capybara with React Component
body: <p>I've created a little scaffold for create posts with Rails, but instead use the standard form with <code>erb</code> I've created a simple React Component (I use the gem <a href="https://github.com/reactjs/react-rails" rel="nofollow noreferrer">react-rails</a> and <a href="https://github.com/browserify-rails/browserify-rails" rel="nofollow noreferrer">browserify-rails</a>).</p>
  
  <p><strong>You can find a sample repo with all the source code <a href="https://github.com/pioz/test-react-with-capybara" rel="nofollow noreferrer">here</a></strong>!</p>
  
  <p>The React component looks like this:</p>
  
  <pre><code>class NewPostForm extends React.Component {
  
    constructor(props) {
      super(props)
      this.state = {}
    }
  
    render() {
      return(
        &lt;form action="/posts" accept-charset="UTF-8" method="post"&gt;
          &lt;input name="utf8" type="hidden" value="✓"/&gt;
          &lt;input type="hidden" name="authenticity_token" value={this.props.authenticityToken}/&gt;
  
          &lt;div className="field"&gt;
            &lt;label for="post_title"&gt;Title&lt;/label&gt;
            &lt;input type="text" name="post[title]" id="post_title" onChange={(e) =&gt; this.setState({title: e.target.value})} /&gt;
          &lt;/div&gt;
  
          &lt;div className="field"&gt;
            &lt;label for="post_body"&gt;Body&lt;/label&gt;
            &lt;textarea name="post[body]" id="post_body" onChange={(e) =&gt; this.setState({body: e.target.value})}&gt;&lt;/textarea&gt;
          &lt;/div&gt;
  
          { this.state.title &amp;&amp;
            &lt;div class="actions"&gt;
              &lt;input type="submit" name="commit" value="Create Post" data-disable-with="Create Post"/&gt;
            &lt;/div&gt;
          }
        &lt;/form&gt;
      )
    }
  
  }
  </code></pre>
  
  <p><em>Note that the submit button is added to the DOM only if the title input field is filled.</em></p>
  
  <p>The file <code>app/views/posts/_form.html.erb</code> is this:</p>
  
  <pre><code>&lt;%= react_component 'NewPostForm', {authenticityToken: form_authenticity_token.to_s}, {prerender: true} %&gt;
  </code></pre>
  
  <p>Now I've created this integration test that use Capybara:</p>
  
  <pre><code>require 'test_helper'
  
  class PostCreationTest &lt; 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' # &lt;=== DO NOT FIND THIS BUTTON CAUSE IS ADDED WITH REACT
      assert page.has_content?('Post was successfully created.')
    end
  
  end
  </code></pre>
  
  <p>The test fail with this error:</p>
  
  <pre><code>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 &lt;class:PostCreationTest&gt;'
  
  
  bin/rails test test/integration/post_creation_test.rb:5
  </code></pre>
  
  <p>In test_helper.rb I've configured Capybara to use poltergeist driver.</p>
  
  <pre><code>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
  </code></pre>
  
  <p>If I display always the submit buttom (removing <code>{ this.state.title &amp;&amp;</code>) in the react component the test pass successfully.</p>
  
  <p>So, there is a way to make this test works with this setup and React components?</p>