Capybara tests don't work, while actual app works fine. React front-end in Rails 5

Question

Specs : Rails 5.2, Ruby 2.5.1, Yarn 1.91.1, React-Rails 2.6.0, selenium-webdriver 3.14, chromedriver 77, capybara gem 3.29, Ubuntu 18.04

Issue : I created a questionnaire using react components in a Rails app which works when run in development mode. I can click the yes or no button then a callback function renders the new question text. However my selenium integration tests don't pick this up. The page object continues to have the same text for the first question so I receive an error like this

Failure/Error: expect(question.text).to include('last question') expected "first question" to include "last question"

The test itself looks like this in features/questionnaire.rb

 RSpec.feature "Onboarding Questionnaire", type: :feature, js:true do
 (...)
 it...
   question = find('h3.question')
   expect(question.text).to include('first question')
   yes = find('#yes')
   yes.click
   sleep 5
   question = find('h3.question')
   expect(question.text).to include('last question')

The problem arises after yes.click . I thought at first my animations were causing the issue, but I removed those and it is just using setState in my callback function.

Here is my react callback function

 saveAnswer(e) {
    questionnaire = this
    ++questionnaire.state.page
    questionnaire.setState({page: questionnaire.state.page})
  } 

Here is my driver config
Capybara.javascript_driver =:selenium_chrome_headless

Answer 1

Now using sleep works as desired. Here are the changes I made.

1) I removed the deprecated gem chromedriver-helper and replaced it with webdrivers

2) Added require 'webdrivers' to the rails_helper.rb file.

3) Found error in my react code (which wasn't showing up in development or being logged in chrome webdriver) of questionnaire = this which I changed to var questionnaire = this .

Integration tests now pass fine using selenium_chrome_headless