VUE单元测试错误:Vuex需要在此浏览器中进行承诺的多填充

我使用vue-cli创建了一个项目，并在其中添加了vuex和vue-router。我正在尝试为其设置单元测试，但是我会遇到以下错误。没有vuex，它曾经工作。

phantomjs 2.1.1（Mac OS x 0.0.0）错误

错误：[vuex] vuex在此浏览器中需要一个承诺的polyfill。

在webpack：///////~~/vuex/dist/vuex.js：145：0＆lt; - 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' }
      ]
    }
  })
}

使用babel Polyfill解决了问题。这是我所做的步骤：

安装babel polyfill：

npm install --save-dev babel-polyfill

然后在karma.conf.js的files部分中包含源文件和测试文件：

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

如果您认为babel-polyfill太大，则可以包括ES6-Promise Polyfill：

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

另一方面，如果您不确定网站访问者的浏览器是否具有内置的Promise支持，则可以在输入填充中包含polyfill， main.js.js ：

import 'es6-promise/auto'

编辑：

好消息！Chrome可以以"无头"模式运行。版本59。因此，您可以在无头铬中运行单元测试，而不是phantomjs。

对于 vue-cli/webpack 生成的项目，您可以按照以下步骤操作：

安装 Karma-Chrome-launcher 通过NPM或YARN。
您也可以删除 Karma-Phantomjs-launcher ， Karma-Phantomjs-Shim ， Phantomjs-Prebuilt 来自您的项目。他们是用于phantomjs。
在 test/ution/karma.conf.js 中，将browsers字段更改为['ChromeHeadless']，然后从frameworks字段中删除'phantomjs-shim'。

这是我的 karma.conf.js ，不再多fill：

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的一些功能，而没有多填充。
phantomjs从大约18个月前就没有进行更新。它不支持许多新功能，因为ES规格移动如此之快。
phantomjs的作者宣布要中断。

我的应用程序是使用webpack创建的，我发现将应用程序加载到Internet Explorer中并停止此错误的唯一方法是将此脚本放在我的index.html的头上。html


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

我希望提供帮助。

相关内容

最新更新

热门标签：