[英]Vue Unit Test Error: vuex requires a Promise polyfill in this browser
I created a project using vue-cli
and added vuex
and vue-router
in it.我使用vue-cli
创建了一个项目,并在其中添加了vuex
和vue-router
。 I am trying to setup a unit test for it, but I am getting following error.我正在尝试为其设置单元测试,但出现以下错误。 Without Vuex, it used to work.没有 Vuex,它曾经可以工作。
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR PhantomJS 2.1.1 (Mac OS X 0.0.0) 错误
Error: [vuex] vuex requires a Promise polyfill in this browser.错误:[vuex] vuex 需要在此浏览器中使用 Promise polyfill。
at webpack:///~/vuex/dist/vuex.js:145:0 <- index.js:9871在 webpack:///~/vuex/dist/vuex.js:145:0 <- index.js:9871
The following are the relevant package versions:以下是相关的包版本:
"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"
The following is karma.conf.js:以下是 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' }
]
}
})
}
Using Babel polyfill solved the problem.使用 Babel polyfill 解决了这个问题。 Here are the steps what I did:以下是我所做的步骤:
Installing Babel Polyfill :安装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
:然后在karma.conf.js
的files
部分中的源文件和测试文件之前包含karma.conf.js
files
:
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:如果你认为 babel-polyfill 太大,你可以只包含 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 :另一方面,如果您不确定站点访问者的浏览器是否具有内置的Promise
支持,您可以将polyfill包含在您的条目填充main.js 中:
import 'es6-promise/auto'
EDIT:编辑:
Good news!好消息! Chrome can run in headless mode since version 59 . 自版本 59 起,Chrome 可以在无头模式下运行。 So you could run your unit tests in headless Chrome now instead of PhantomJS.因此,您现在可以在无头 Chrome 中运行单元测试,而不是 PhantomJS。
For vue-cli/webpack generated projects, you could follow these steps:对于vue-cli/webpack生成的项目,您可以按照以下步骤操作:
browsers
field to ['ChromeHeadless']
, and remove 'phantomjs-shim'
from frameworks
field.在test/unit/karma.conf.js 中,将browsers
字段更改为['ChromeHeadless']
,并从frameworks
字段中删除'phantomjs-shim'
。Here's my karma.conf.js , no polyfill anymore:这是我的karma.conf.js ,不再使用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' }
]
}
})
}
The reason to do so:这样做的原因:
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我的应用程序是用 webpack 创建的,我发现在 Internet Explorer 中加载我的应用程序并阻止此错误的唯一方法是将此脚本放在我的 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.我希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.