ember tests passing in chrome, not in phantomjs

Question

I have tests for an addon which pass in chrome, but fail in phantomjs.

It seems to be a problem similar to this question. However, I tried the solution there and it didn't work for me.

The code is all available in the public repo linked above. The failures are exhibited in the failing travis build on github. Any ideas on how to diagnose better and fix?

EDIT -- actual error message

        Died on test #1     at http://localhost:7357/assets/test-support.js:3062
            at test (http://localhost:7357/assets/test-support.js:1945)
            at test (http://localhost:7357/assets/dummy.js:2090)
            at http://localhost:7357/assets/dummy.js:2885
            at http://localhost:7357/assets/vendor.js:150
            at tryFinally (http://localhost:7357/assets/vendor.js:30)
            at http://localhost:7357/assets/vendor.js:156
            at http://localhost:7357/assets/test-loader.js:29
            at http://localhost:7357/assets/test-loader.js:21
            at http://localhost:7357/assets/test-loader.js:40
            at http://localhost:7357/assets/test-support.js:6775: Can't find variable: Symbol

UPDATE

Following up on a hint from @knownasilya, I tried forcing optional babel transform es6.spec.symbols on: in ember-cli-build.js:

 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {
     // Add options here
+    babel: {
+      optional: ['es6.spec.symbols']
+    }
   });

However -- no luck. It does look like an es6 transpilation problem, though. Did I not pass the option successfully? Any other hints? I'll be happy to post code snippets if you don't want to look in the repo. :)

UPDATE 2

Including as well:

+      includePolyfill: true

works!

Now I'm on to:

        ReferenceError: Can't find variable: requestAnimationFrame

I'm looking for a polyfill for this as well... but looking at the testem configuration for ember-collection, which seems to have a similar configuration, I notice that phantomjs testing is turned off! Now the question is: best way to test requestAnimationFrame in phantomjs?

Isn't `Symbol` an ES6 feature, so an ES5 shim wouldn't help. — knownasilya, Aug 26 '15 at 18:58
Ah ... I think you're right -- tests die in Safari as well, which doesn't support "Symbol". But... I do need to know more about the build process, but shouldn't babel have already transpiled before writing into dist? Why is it working in chrome which also has spotty es6 support? — shaunc, Aug 26 '15 at 19:17
What library are you using that uses the requestAnimationFrame functionality? — Stephen Prockow, Aug 26 '15 at 20:03
[ember-collection](https://github.com/emberjs/ember-collection) — shaunc, Aug 26 '15 at 22:59
Try installing babel, and doing `import 'npm:babel/polyfill'` in app/app.js (notice the use of ember-browserify). — knownasilya, Aug 26 '15 at 23:38
you might give this question a look - it was a fairly current version of ember-cli and fixed a similar issue :) http://stackoverflow.com/questions/31837891/ember-acceptance-test-failing-in-phantomjs-but-passing-in-chrome/31868057#31868057 — Toran Billups, Aug 27 '15 at 02:54
@knowasilya - thanks to your first comment, I got "Symbol" interpreted -- see "Update 2". @toran-billups - indeed the link I posted was to that question, but as @knowasilya writes its not that problem. Now the issue is a polyfill for `requestAnimationFrame` that works with phantomjs — shaunc, Aug 27 '15 at 04:14
@knownasilya -- your fix is probably appropriate for testing an app. In fact, I'm testing an addon, so was able to put `includePolyfill: true` into the `ember-cli-build.js`. Further question about `requestAnimationFrame` is changing the goalposts on my part so if you want to write up `ember-cli-build.js` fix I can credit your answer, and ask that question separately. — shaunc, Aug 27 '15 at 04:20

knownasilya · Accepted Answer · 2017-07-06T17:48:47.337

The offending culprit is Can't find variable: Symbol, which is an ES2015 (ES6) feature, which is why the es5 shim didn't work for you.

Since babel doesn't include polyfills by default, you need to force ember-cli-babel to include the polyfills.

// ember-cli-build.js
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  const app = new EmberApp(defaults, {
    'ember-cli-babel': {
      includePolyfill: true
    }
  });

  return app.toTree();
};

For details of the available options, see https://github.com/babel/ember-cli-babel#options

For a more comprehensive solution, give babel6 (https://github.com/ember-cli/ember-cli/pull/6828) and targets (https://github.com/ember-cli/ember-cli/pull/6776) a try.

Note: The polyfill includes core.js which includes Symbols.

Ember-CLI v2.13 throws this warning: `DEPRECATION: Putting the "includePolyfill" option in "babel" is deprecated, please put it in "ember-cli-babel" instead.`, but the answer still works to fix the issue. Move `includePolyfill: true` to the new key `"ember-cli-babel"` in the options hash to eliminate the warning. Use the quotes. — marc_alain, Jul 04 '17 at 17:18

ember tests passing in chrome, not in phantomjs

1 Answers1

Linked