Vue unit test: vuex требует Promise polyfill в этом браузере
Я создал проект с использованием vue-cli
и добавил в него vuex
и vue-router
. Я пытаюсь установить unit test для него, но я получаю следующую ошибку. Без vuex он работал.
PhantomJS 2.1.1 (Mac OS X 0.0.0) ОШИБКА
Ошибка: [vuex] vuex требует Promise polyfill в этом браузере.
в webpack:///~/vuex/dist/vuex.js: 145: 0 < - index.js: 9871
Ниже приведены соответствующие версии пакетов:
"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"vue": "^2.1.0",
"vue-router": "^2.0.3",
"vuex": "^2.0.0",
"vuex-router-sync": "^3.0.0"
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sinon-chai": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^1.7.0",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1"
Ниже приведена karma.conf.js:
// This is a karma config file. For more details see
// http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
// https://github.com/webpack/karma-webpack
var path = require('path')
var merge = require('webpack-merge')
var baseConfig = require('../../build/webpack.base.conf')
var utils = require('../../build/utils')
var webpack = require('webpack')
var projectRoot = path.resolve(__dirname, '../../')
var webpackConfig = merge(baseConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
loaders: utils.styleLoaders()
},
devtool: '#inline-source-map',
vue: {
loaders: {
js: 'isparta'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../../config/test.env')
})
]
})
// no need for app entry during tests
delete webpackConfig.entry
// make sure isparta loader is applied before eslint
webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
webpackConfig.module.preLoaders.unshift({
test: /\.js$/,
loader: 'isparta',
include: path.resolve(projectRoot, 'src'),
exclude: /test\/unit|node_modules/
})
// only apply babel for test files when using isparta
webpackConfig.module.loaders.some(function (loader, i) {
if (loader.loader === 'babel') {
loader.include = path.resolve(projectRoot, 'test/unit')
return true
}
})
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: ['Chrome'],
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' }
]
}
})
}
Ответы
Ответ 1
Использование Babel polyfill решило проблему. Вот шаги, которые я сделал:
Установка Babel Polyfill:
npm install --save-dev babel-polyfill
затем включите файл polyfill перед исходным кодом и проверьте файлы в разделе files
вашего karma.conf.js
:
files: [
'../node_modules/babel-polyfill/dist/polyfill.js',
'index.js'
],
Ответ 2
Если вы считаете, что babel- polyfill слишком велик, вы можете просто включить es6-prom polyfill:
files: [
'../node_modules/es6-promise/dist/es6-promise.auto.js',
'index.js'
],
С другой стороны, если вы не уверены, что у браузеров посетителей вашего сайта есть встроенная поддержка Promise
, вы можете включить polyfill в заполнение записи, main.js
import 'es6-promise/auto'
EDIT:
Хорошие новости! Chrome может работать в режиме без headless с версии 59. Таким образом, вы можете запускать юнит-тесты в безгласном Chrome сейчас вместо PhantomJS.
Для созданных проектов vue-cli/webpack вы можете выполнить следующие действия:
- Установите карма-хром-пусковую установку через npm или пряжу.
- Вы также можете удалить из своего проекта карма-phantomjs-launcher, karma-phantomjs-shim, phantomjs-prebuilt. Они предназначены для PhantomJS.
- В test/unit/karma.conf.js измените поле
browsers
на ['ChromeHeadless']
и удалите 'phantomjs-shim'
из frameworks
.
Здесь больше karma.conf.js, no polyfill:
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' }
]
}
})
}
Причина для этого:
- Chrome 59 - последний стабильный релиз, он поддерживает большинство функций ES6, даже некоторые из ES7/8, без polyfill.
- PhantomJS не обновляется с 18 месяцев назад. Он не поддерживает много новых функций, так как спецификации ES движутся так быстро.
- Автор PhantomJS объявил о прекращении.