Testando

O template vue-cli do webpack oferece testes de unidade pré-configurados e configurações de teste es2 para você.

Ao testar arquivos *.vue não podemos usar um corredor de teste simples baseado em CommonJs, porque ele não sabe como manipular arquivos *.vue. Em vez disso, nós ainda usaremos webpack + vue-loader para manipular nossos arquivos de teste. A configuração recomendada é usando Karma e karma-webpack.

Karma é um corredor de teste que inicia navegadores e executa seus testes. Você pode escolher qual navegador você quer para testar e qual framework (exemplo: Mocha ou Jasmine) você quer usar. Aqui está um exemplo de configuração Karma que executa os testes dentro de PhantomJS com o framework de teste Jasmine.

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

// podemos usar a mesma configuração que é exigida pelo webpackm
// entretanto, lembre-se de remover a entrada original, uma vez
// que não precisamo durante os testes
var webpackConfig = require('./webpack.config.js')
delete webpackConfig.entry

// karma.conf.js
module.exports = function (config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['jasmine'],
    // este é o arquivo de entrada para todos os nossos testes
    files: ['test/index.js'],
    // vamos passar o arquivo de entrada para webpack empacotar
    preprocessors: {
      'test/index.js': ['webpack']
    },
    // use a configuração do webpack
    webpack: webpackConfig,
    // evita pedaços de texto inúteis
    webpackMiddleware: {
      noInfo: true
    },
    singleRun: true
  })
}

E para o arquivo test/index.js de entrada:

// test/index.js
// requisita todos os arquivos de testes usando 0 recursos especial do webpack
// https://webpack.github.io/docs/context.html#require-context
var testsContext = require.context('.', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

Este recurso de entrada simplesmente requisita todos os outros arquivos na pasta que terminam com .spec.js. Agora podemos realmente escrever alguns testes:

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

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

  // Opções JavaScript de afirmação (asserting)
  it('should have correct message', function () {
    expect(ComponentA.data().msg).toBe('Olá do componente A!')
  })

  // Afirmando o resultado renderizado fornecido pelo componente
  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('Olá do componente A!')
  })
})

Para executar os testes, adicione o seguinte script NPM:

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

Finalmente execute:

npm test

Novamente, template vue-cli webpack contém um exemplo totalmente funcional com testes.