CapybaraでReactをテストしようとしたらエラーになった件

  • 3
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

RailsでReact.jsをE2Eテストを行おうとしたらエラーになってハマりました。
しかもローカルではテストをパスするのにCircleCIで動かしたらエラー吐いた

開発環境

  • Rails(4.2.5)
  • Capybara (2.6.0)
  • Poltergeist (1.8.1)
  • react-rails(1.5.0)

以下エラーメッセージ

Capybara::Poltergeist::JavascriptError:
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:55927/assets/application.js:27030
        at http://127.0.0.1:55927/assets/application.js:16683 in __webpack_require__
        at http://127.0.0.1:55927/assets/application.js:25132
        at http://127.0.0.1:55927/assets/application.js:25210
        at http://127.0.0.1:55927/assets/application.js:16683 in __webpack_require__
        at http://127.0.0.1:55927/assets/application.js:16792
        at http://127.0.0.1:55927/assets/application.js:16867
        at http://127.0.0.1:55927/assets/application.js:16683 in __webpack_require__
        at http://127.0.0.1:55927/assets/application.js:16743
        at http://127.0.0.1:55927/assets/application.js:16683 in __webpack_require__
        at http://127.0.0.1:55927/assets/application.js:16723
        at http://127.0.0.1:55927/assets/application.js:16683 in __webpack_require__
        at http://127.0.0.1:55927/assets/application.js:16710
        at http://127.0.0.1:55927/assets/application.js:16683 in __webpack_require__
        at http://127.0.0.1:55927/assets/application.js:16703
        at http://127.0.0.1:55927/assets/application.js:36304

解決方法

どうやらphantomjsのバージョンが低くてbindが定義されていないのが問題らしい。
es5-shimをいれるといいらしい、というのがこちらにありました。

  • es5-shimの入手先
  • applicaion.jsでreactよりも前にshimを読み込ませる

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