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'
fromframeworks
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:
- Chrome 59 is the latest stable release, it supports most ES6 features, even some from ES7/8, without polyfill.
- PhantomJS hasn't been updated since about 18 months ago. It doesn't support many new features since ES specs are moving so fast.
- 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.