web-dev-qa-db-ja.com

Vueユニットテストエラー：vuexでは、このブラウザーでPromiseポリフィルが必要です

vue-cliを使用してプロジェクトを作成し、vuexとvue-routerを追加しました。単体テストをセットアップしようとしていますが、次のエラーが発生します。 Vuexがなければ、以前は機能していました。

PhantomJS 2.1.1（Mac OS X 0.0.0）エラー

エラー：[vuex] vuexは、このブラウザーでPromiseポリフィルを必要とします。

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' }
      ]
    }
  })
}
javascriptunit-testingvue.jskarma-runnerisparta
15
Saurabh

Babelポリフィルを使用すると問題が解決しました。ここに私がやったステップがあります：

インストール Babel Polyfill ：

npm install --save-dev babel-polyfill

次に、karma.conf.jsのfilesセクション内のソースファイルとテストファイルの前にポリフィルファイルを含めます。

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

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はバージョン59以降headlessモードで実行できます 。したがって、PhantomJSの代わりにヘッドレスChrome=でユニットテストを実行できます。

vue-cli/webpackで生成されたプロジェクトの場合、次の手順に従います。

  • Npmまたはyarnを介してkarma-chrome-launcherをインストールします。
  • karma-phantomjs-launcher、karma-phantomjs-shim、phantomjs-prebuiltも削除できますプロジェクトから。それらはPhantomJS用です。
  • test/unit/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は最新の安定版リリースであり、ポリフィルなしのES7/8の一部を含め、ほとんどのES6機能をサポートしています。
  2. PhantomJSは、約18か月前から更新されていません。 ES仕様は非常に高速に移動しているため、多くの新機能をサポートしていません。
  3. PhantomJSの作者は中止を発表しました。
21
Leo