关于Vue Webpack2单元测试示例详解

├─src
│ ├─assets
│ ├─components
│ ├─app.vue
│ └─main.js
├─test
│ └─unit
│  ├─coverage
│  ├─specs
│  ├─index.js
│  └─karma.conf.js
├─.babelirc
├─webpack.conf.js
└─package.json

yarn add -D \
cross-env \
# webpack
webpack \
webpack-merge \
vue-loader \
# babel
babel-core \
babel-loader \
babel-plugin-transform-runtime \
babel-preset-es2015 \
babel-register \
babel-plugin-istanbul \
# karma
karma \
karma-coverage \
karma-phantomjs-launcher \
karma-sourcemap-loader \
karma-spec-reporter \
karma-webpack \
mocha \
karma-mocha \
sinon-chai \
karma-sinon-chai \
chai \
sinon \

{
 "scripts": {
 "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
 "test": "npm run unit",
 }
}

{
 "presets": ["es2015"],
 "plugins": ["transform-runtime"],
 "comments": false,
 "env": {
 "test": {
  "plugins": [ "istanbul" ]
 }
 }
}

{
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader'
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
   path.resolve(__dirname, '../src')
  ],
  exclude: /node_modules/
  }
 ]
 }
}

// karma.conf.js
const merge = require('webpack-merge')
let webpackConfig = merge(require('../../webpack.conf'), {
 devtool: '#inline-source-map',
 plugins: [
 new webpack.DefinePlugin({
  'process.env': '"testing"'
 })
 ]
})
// no need for app entry during tests
delete webpackConfig.entry

// karma.conf.js
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' }
  ]
 }
 })
}

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
  'js': 'istanbul-instrumenter-loader'
 }
 }
}