Vue單元測試錯誤：vuex在此瀏覽器中需要Promise填充

Question

我使用vue-cli創建了一個項目，並在其中添加了vuex和vue-router。我正在嘗試爲它設置單元測試，但我遇到了以下錯誤。沒有vuex它曾經工作。

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR

Error: [vuex] vuex requires a Promise polyfill in this browser.

at 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' } 
     ] 
    } 
    }) 
} 

Answer 1

使用巴貝爾填充工具解決了這個問題。下面是我所做的步驟：

安裝Babel Polyfill：

npm install --save-dev babel-polyfill 

然後包括在你的源和測試文件的填充工具文件您karma.conf.js的files部分中：

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

Answer 2

如果您覺得babel-polyfill太大了，你可以包括es6-promise polyfill：

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

在另一方面，如果你不知道你的網站訪問者的瀏覽器是否有內置Promise支持，您可以在您進入填土填充工具，main.js：

import 'es6-promise/auto' 

---

編輯：

好消息！ Chrome can run in headless mode since version 59。因此，您現在可以在無頭Chrome中運行您的單元測試，而不是PhantomJS。

對於VUE-CLI /的WebPack生成的項目，你可以按照下列步驟操作：

• 安裝通過NPM或紗線卡瑪 - 鉻發射。
• 您也可以刪除卡瑪phantomjs-發射，果報phantomjs-墊片，phantomjs-預建從您的項目。他們是爲PhantomJS。
• 在測試/單元/ karma.conf.js，更改browsers字段['ChromeHeadless']，並從frameworks字段中刪除'phantomjs-shim'。

這是我的karma.conf。JS，不填充工具了：

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' } 
     ] 
    } 
    }) 
} 

之所以這樣做：

1. 的Chrome 59是最新的穩定版本，它支持大多數ES6的功能，甚至一些從ES7/8，不填充工具。
2. PhantomJS自18個月前未更新。自ES規格移動如此之快以來，它不支持許多新功能。
3. PhantomJS的作者已經宣佈停止。