测试阶段

该 webpack vue-cli template 提供了预先配置的单元测试和 e2e 的测试设置。

在测试 *.vue 文件的环节，因为还不知道如何处理 *.vue 文件，所以我们不能用简单的基于 CommonJS 的测试。但是，我们可以使用 Webpack + vue-loader 来打包我们的测试文件。推荐的设置是用 Karma 和 karma-webpack。

Karma 是一个为你自动启用浏览器和运行测试代码的程序。你可以选择哪个浏览器或哪个框架（如，Mocha 或 Jasmine）来完成测试。这里有个 Karma 配置的实例，这是在 PhantomJS 内用 Jasmine 框架的测试：

npm install\
  karma karma-webpack\
  karma-jasmine jasmine-core\
  karma-phantomjs-launcher phantomjs\
  --save-dev

// 我们可以要求它使用相同的WebPACK配置，但是要记得删掉原始记录，因为测试过程用不到。
var webpackConfig = require('./webpack.config.js')
delete webpackConfig.entry

// karma.conf.js
module.exports = function (config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['jasmine'],
    // 这是我们所有测试的入口文件 
    files: ['test/index.js'],
    // 我们通过入口文件来让 WebPACK 完成打包
    preprocessors: {
      'test/index.js': ['webpack']
    },
    // 使用 webpack 配置
    webpack: webpackConfig,
    // 避免无用的文本
    webpackMiddleware: {
      noInfo: true
    },
    singleRun: true
  })
}

入口文件 test/index.js ：

// test/index.js
// 要求所有的测试文件使用指定的 Webpack 功能
// https://webpack.github.io/docs/context.html#require-context
var testsContext = require.context('.', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

入口文件需要的文件都是同一目录下以 .spec.js 结束的。现在我们写一下测试：

// test/component-a.spec.js
var Vue = require('vue')
var ComponentA = require('../../src/components/a.vue')

describe('a.vue', function () {

  // 呈现 JavaScript 选项
  it('should have correct message', function () {
    expect(ComponentA.data().msg).toBe('Hello from Component A!')
  })

  // 根据实际组件来呈现结果component
  it('should render correct message', function () {
    var vm = new Vue({
      template: '<div><test></test></div>',
      components: {
        'test': ComponentA
      }
    }).$mount()
    expect(vm.$el.querySelector('h2.red').textContent).toBe('Hello from Component A!')
  })
})

运行测试脚本，然后添加如下的 NPM 脚本：

// package.json
...
"scripts": {
  ...
  "test": "karma start karma.conf.js"
}
...

最后执行：

npm test

webpack vue-cli template 包含了一个完整的测试实例。