Vue Unit Test Error: vuex requires a Promise polyfill in this browser Vue Unit Test Error: vuex requires a Promise polyfill in this browser vue.js vue.js

Vue Unit Test Error: vuex requires a Promise polyfill in this browser


Using Babel polyfill solved the problem. Here are the steps what I did:

Installing Babel Polyfill:

npm install --save-dev babel-polyfill

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'],


If you think babel-polyfill is too big, you could just include the es6-promise polyfill:

files: [  '../node_modules/es6-promise/dist/es6-promise.auto.js',  'index.js'],

On the other hand, if you are not sure whether your site visitors' browsers have built-in Promise support, you could include the polyfill in your entry fill, main.js:

import 'es6-promise/auto'

EDIT:

Good news! Chrome can run in headless mode since version 59. So you could run your unit tests in headless Chrome now instead of PhantomJS.

For vue-cli/webpack generated projects, you could follow these steps:

  • Install karma-chrome-launcher via npm or yarn.
  • You could also remove karma-phantomjs-launcher, karma-phantomjs-shim, phantomjs-prebuilt from your project. They are for PhantomJS.
  • In test/unit/karma.conf.js, change browsers field to ['ChromeHeadless'], and remove 'phantomjs-shim' from frameworks field.

Here's my karma.conf.js, no polyfill anymore:

var webpackConfig = require('../../build/webpack.test.conf')module.exports = function(config) {  config.set({    // to run in additional browsers:    // 1. install corresponding karma launcher    //    http://karma-runner.github.io/0.13/config/browsers.html    // 2. add it to the `browsers` array below.    browsers: ['ChromeHeadless'],    frameworks: ['mocha', 'sinon-chai'],    reporters: ['spec', 'coverage'],    files: ['./index.js'],    preprocessors: {      './index.js': ['webpack', 'sourcemap']    },    webpack: webpackConfig,    webpackMiddleware: {      noInfo: true    },    coverageReporter: {      dir: './coverage',      reporters: [        { type: 'lcov', subdir: '.' },        { type: 'text-summary' }      ]    }  })}

The reason to do so:

  1. Chrome 59 is the latest stable release, it supports most ES6 features, even some from ES7/8, without polyfill.
  2. PhantomJS hasn't been updated since about 18 months ago. It doesn't support many new features since ES specs are moving so fast.
  3. The author of PhantomJS has announced to discontinue.


my application was created with webpack and the only way i found to load my application in internet explorer and stop this error was to put this script in the head of my index.html

    <!-- Script for polyfilling Promises on IE9 and 10 -->    <script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>

I hope to help.