Unable to get RSpec test to pass with React.js about react-rails

[jtmalinowski]

Hey!,
It seems that phantomjs cannot run React code, I'll post the issue in React repo.

Thanks for that.

[jtmalinowski]

Will let you know here as soon as it is pulled in and published to rubygems, in the meantime if you need a workaround, you would have to create a copy of react.js and apply the required change (it's in the PR).

[tomelm]

Thanks for this @JakubMal!

[jtmalinowski]

As suggested in the PR, just use polyfill for Function.prototype.bind

[zpao]

Hey, sorry if I came off a bit harsh there. Let me know if that's an option for you @tomelm and if not I'll definitely take it into consideration. I've been a bit dogmatic but I'm open to reason :)

[tomelm]

@zpao no problem! I totally understand where you're coming from. I will try the es5-shim and see if that might help the headless browsers with the tests. I don't need anything crazy as long as I can get the tests passing appropriately :p

[daGrevis]

Bump!

I'm trying to test React using CasperJS (it's based on PhantomJS) and React is not defined. Other libraries I include the same way as React (Lo-Dash, for example) are found.

Can this be related? What's the current status?

[daGrevis]

This issue is closely related. facebook/react#347

tl;dr Use https://github.com/es-shims/es5-shim/blob/master/es5-shim.js or don't use PhantomJS/CasperJS at all, but go for Selenium.

[jtmalinowski]

I think we could add es5-shim when test environment is present. Put on my TODO list to rethink or close this issue.

[zpao]

We're going to need more than es5-shim for React soon, so our story around polyfills in React may change. Follow along in facebook/react#1998

[jtmalinowski]

How about we display a warning when poltergeist is detected? (phantomjs has been stuck at the shitty version of webkit for quite a time now) On the other hand it looks like ES 6+ features will be shimmed on your side - due to the browser support?

[zpao]

@JakubMal I don't know yet where we'll end up with built-in polyfill support for ES*

[Loremaster]

@daGrevis Did you just add es5-shim.js and tests started to work?

[daGrevis]

@Loremaster Sure. Doesn't it for you?

[Loremaster]

@daGrevis Yes, it doesn't. :( I added es5-shim.js to the vendor folder. Then I required it in application.js:

//= require jquery
...
//= require es5-shim

I restarted rails server and I can see that new file appeared. But when I try to run tests again then I see the 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:54587/assets/application.js:32342
          at http://127.0.0.1:54587/assets/application.js:28807 in s
          at http://127.0.0.1:54587/assets/application.js:28807
          at http://127.0.0.1:54587/assets/application.js:37581
          at http://127.0.0.1:54587/assets/application.js:28807 in s
          at http://127.0.0.1:54587/assets/application.js:28807
          at http://127.0.0.1:54587/assets/application.js:32910
          at http://127.0.0.1:54587/assets/application.js:28807 in s
          at http://127.0.0.1:54587/assets/application.js:28807 in e
          at http://127.0.0.1:54587/assets/application.js:47260
          at http://127.0.0.1:54587/assets/application.js:28807
          at http://127.0.0.1:54587/assets/application.js:47262 (Capybara::Poltergeist::JavascriptError)
      ./features/step_definitions/service.steps.rb:16:in `/^the individual user$/'
      features/service/new.feature:10:in `Given the individual user'

Any ideas what to do?

[daGrevis]

@Loremaster Sorry, mate. Maybe you are mising some other required shims.

[Loremaster]

Hey, I found the solution! I should set es5-shim BEFORE the react init:

application.js

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

Now it works, awesome!

[daGrevis]

Of course you should use it before. Glad it works now. ;)

[mockdeep]

I ran into this problem today. Adding es5-shim did the trick. @Loremaster you can use rails-assets-es5-shim so you don't have to put the code in your repo's vendor directory.

[feifanzhou]

👍 Thanks guys! Spent three hours trying to figure this out, glad I found this thread

[tirdadc]

Thanks for this. I think it might be worth adding a note about this to README.md.

[daGrevis]

Feels good to help others! I'm glad I wrote how I solved it here! 👍

[rmosolgo]

glad to hear this was solved!

[ygt-mikekchar]

Yes, please put a pointer in the README. We spent ages on this too (and didn't think to look at a closed issue).

Thank you for figuring this out! You saved out lives ;-)

[loretoparisi]

I have tried to inject the shim script through page.injectJS, but it didn't work, I guess since page.injectJS does not support closures:

page.open(url, function(status) {
          if (status === "success") {

            if (page.injectJs('es5-shim.js')) {
              page.render(pageCaptureFileName, {
                format: Settings.pageCaptureFileType,
                quality: Settings.pageCaptureQuality
              })
            }

          }
        });

http://phantomjs.org/api/webpage/method/inject-js.html

[abreckner]

Just wanted to mention that with PhantomJS 2 out (which is ES5 compliant) you no longer need the Es5 shim to get Poltergeist working...

[loretoparisi]

@abreckner that is a great news, but I was using PhantomJS that version already:

macbookproloreto:async-example admin$ phantomjs -v
2.1.1