Karma, PhantomJS and es6 Promises

Question

I am writing a JavaScript library that uses the new es6 promises. I can test the library in Firefox because promises are defined. However, when I try to test my code with Karma

Answer 1

You can pull in the Babel polyfill by simply installing Babel Polyfill:

npm install --save-dev babel-polyfill

and then include the polyfill file before your source and test files within the files section of your karma.conf.js:

files: [
  'node_modules/babel-polyfill/dist/polyfill.js',
  'index.js',   //could be /src/**/*.js
  'index.spec.js' //could be /test/**/*.spec.js
],

Unless you know that all your target browsers support Promises, you probably want to apply this polyfill to your released build too.

If you're feeling really adventurous you can use Browserify to pull files in to make your testing more modular, and then use Babelify to transpile ES6 to ES5. I've created a sample project with these and a working test involving a Promise (running on PhantomJS2) for reference.

Answer 2

For Babel 6, we need install babel-polyfill to support promise.

npm install --save-dev babel-polyfill

and add a line in karma.conf.js within the files section

files: [
  'node_modules/babel-polyfill/dist/polyfill.js',
  ....
]

It's well documented in https://github.com/babel/karma-babel-preprocessor#polyfill

Answer 3

This thread should help you. According to it, it seems you should try to use PhantomJS2 with ES6. You can also take a look to this project, which treat to the a near subject than yours.

I hope it may help you

Answer 4

You can use karma-babel-preprocessor for files that uses ES6 features. Install it with

npm install --save-dev karma-babel-preprocessor

and then add specify what files should be preprocessed you karma.conf:

preprocessors: {
      "src/**/*.js": ["babel"],
      "test/**/*.js": ["babel"]
    },

Answer 5

as correctly pointed out by the author it is not able to recognize es6 promise. In order to load it, es6-promise module can be loaded with the help of webpack.ProvidePlugin and configuring it inside plugins array of webpack.

plugins: [
        new webpack.ProvidePlugin({
            'Promise': 'es6-promise'
        })
    ]

This seems to work for me!