在为Vue进行单元测试时获取与Webpack相关的错误

时间：2016-11-23 12:01:55

标签： unit-testing vue.js webpack isparta

我通过修改vue-hackernews-2.0启动了一个webapp。我也开始编写单元测试。

我在为Vue网络应用设置单元测试时遇到webpack错误：

23 11 2016 17:13:18.968:ERROR [preprocess]: Can not load "webpack"!
  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'vue'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: {
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           vue: ...
         }
       })
     }
 - configuration.module has an unknown property 'preLoaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   Options affecting the normal modules (`NormalModuleFactory`).
    at webpack (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/webpack/lib/webpack.js:16:9)
    at new Plugin (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/karma-webpack/lib/karma-webpack.js:63:18)
    at invoke (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:75:15)
    at Array.instantiate (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:59:20)
    at get (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:48:43)
    at /Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:71:14
    at Array.map (native)
    at Array.invoke (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/karma/lib/preprocessor.js:55:20)
    at Array.forEach (native)
    at createPreprocessor (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/karma/lib/preprocessor.js:74:20)
    at Array.invoke (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:75:15)
    at get (/Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:48:43)
    at /Users/saurabh.mimani/work/codes/jeeves/vue/node_modules/di/lib/injector.js:71:14
    at Array.map (native)
23 11 2016 17:13:19.006:WARN [karma]: No captured browser, open http://localhost:9876/
23 11 2016 17:13:19.017:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
23 11 2016 17:13:19.017:INFO [launcher]: Launching browsers Chrome, Firefox, PhantomJS with unlimited concurrency
23 11 2016 17:13:19.018:ERROR [karma]: Found 1 load error

以下是我的karma.conf.js：

// Karma configuration
// Generated on Wed Nov 23 2016 13:59:48 GMT+0530 (IST)

var path = require('path')
var merge = require('webpack-merge')
var baseConfig = require('../build/webpack.base.config')
var projectRoot = path.resolve(__dirname, '../')

var webpackConfig = merge(baseConfig, {
  // use inline sourcemap for karma-sourcemap-loader
  devtool: '#inline-source-map',
  vue: {
    loaders: {
      js: 'isparta'
    }
  }
})

// no need for app entry during tests
delete webpackConfig.entry

// make sure isparta loader is applied before eslint
webpackConfig.module.preLoaders.unshift({
  test: /\.js$/,
  loader: 'isparta',
  include: projectRoot,
  exclude: /test\/unit|node_modules/
})

// only apply babel for test files when using isparta
webpackConfig.module.rules.some(function (loader, i) {
  if (loader.loader === 'babel') {
    loader.include = /test\/unit/
    return true
  }
})

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    frameworks: ['jasmine'],
    files: ['./index.js'],

    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './index.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['spec', 'coverage', 'progress'],
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome', 'Firefox', 'PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

以下是版本：

"vue": "^2.0.0",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^1.8.0",
"vue-loader": "^9.7.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.17.0"

1 个答案:

答案 0 :(得分：0)

您正在使用webpack 1.x的配置，但您的webpack版本是2.x.

在webpack 1.x中，您可以在配置中使用自定义选项。 Vue通过在配置上使用vue属性来使用它。现在，在webpack 2.x中你无法做到这一点。

Hackernews现在支持webpack 2.x，所以如果你下载一个新版本，它将正确编译。

相关问题
最新问题