Capybara, Poltergeist and Reactjs - 'undefined' is not a function

Question

We started the process of integration Reactjs in our Rails 4.1 app. The thing is that a LOT of features are broken now.

Here is the stack for tests:

• Cucumber
• Capybara
• Poltergeist (via phantomjs)
• Rspec

For example, there is the cucumber feature:

@javascript @services

Feature: Manage Service
  Scenario Outline: Publish and archieve
    Given the individual user
    When I visit services page
    And I click on I18n translation for key "views.labels.add"
    And I fill service's fields and choose price as "<price>"
    And I click on I18n translation for key "<submit_btn>"
    Then I should see I18n translation for key "<message>"
    And Created service should have 1 tag

  Examples:
    | submit_btn                 | price      | message                                       |
    | views.labels.publish       | fixed      | views.messages.notices.add.created            |
    | views.labels.publish       | negotiated | views.messages.notices.add.created            |

When I run this test then I see this error:

  One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).

  TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(
      /^(data|aria)-[a-z_][a-z\d_.\-]*$/
    )')
  TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(
      /^(data|aria)-[a-z_][a-z\d_.\-]*$/
    )')
      at http://127.0.0.1:53686/assets/application.js:32342
      at http://127.0.0.1:53686/assets/application.js:28807 in s
      at http://127.0.0.1:53686/assets/application.js:28807
      at http://127.0.0.1:53686/assets/application.js:37581
      at http://127.0.0.1:53686/assets/application.js:28807 in s
      at http://127.0.0.1:53686/assets/application.js:28807
      at http://127.0.0.1:53686/assets/application.js:32910
      at http://127.0.0.1:53686/assets/application.js:28807 in s
      at http://127.0.0.1:53686/assets/application.js:28807 in e
      at http://127.0.0.1:53686/assets/application.js:47260
      at http://127.0.0.1:53686/assets/application.js:28807
      at http://127.0.0.1:53686/assets/application.js:47262 (Capybara::Poltergeist::JavascriptError)
  ./features/step_definitions/service.steps.rb:16:in `/^the individual user$/'
  features/service/new.feature:9:in `Given the individual user'

Tomkins

PhantomJS 1.x doesn't have Function.prototype.bind. You would need a shim, but I don't know how you would use the shim for your particular technology stack. Related: bind polyfill for PhantomJS. In CasperJS you would do this like this. If you find an answer, don't forget to answer your own question. – Tazza

Answer 1

I found the solution. You need to use shim for that. I put file in vendor/assets/javascripts/es5-shim.js.

After that you need to init this shim. Note that shim should go BEFORE the react's init, it is critical!

application.js

//= require es5-shim
//= require react
//= require react_ujs

After that tests started to work again.

Tomkins