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?

Answer 1

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.