Instalação

Versionamento Semântico

O Vue Test Utils segue o Versionamento Semântico dentro de todos os seus projetos oficiais para funcionalidades documentadas e comportamento. Para comportamento não documentado ou interior exposto, as mudanças são descritas dentro das notas de lançamento.

Usando o Vue Test Utils com o Jest (recomendado)

O Jest é um executor de teste desenvolvido pelo Facebook (agora Meta), com o objetivo de entregar uma solução de testes unitários com baterias inclusas. Você pode aprender mais sobre o Jest em sua documentação oficial.

Aprenda como usar o Jest e a Vue Test Utils para testar Componentes de Ficheiro Único com Vue School

Instalação com a Vue CLI (recomendado)

Se você estiver usando a Vue CLI para construir o seu projeto, você pode usar o plugin cli-plugin-unit-jest para executar testes do Jest.

$ vue add unit-jest

O plugin empurra todas dependências obrigatórias (incluindo o jest), cria um ficheiro jest.config.js com padrões sensíveis, e gera um exemplo de conjunto de teste.

Depois disso, tudo o que você precisa fazer é instalar a Vue Test Utils.

$ npm install --save-dev @vue/test-utils

Instalação Manual

Depois de configurar o Jest, a primeira coisa que você precisa fazer é instalar a Vue Test Utils e a vue-jest para processar os Componentes de Ficheiro Único:

$ npm install --save-dev @vue/test-utils vue-jest

A seguir, você precisa dizer ao Jest para transformar ficheiros .vue usando vue-jest. Você pode fazer isso ao adicionar a seguinte configuração dentro do package.json ou dentro de um ficheiro dedicado de configuração do Jest:

{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // dizer ao Jest para manipular ficheiros `*.vue`
      "vue"
    ],
    "transform": {
      // processar ficheiros `*.vue` com o `vue-jest`
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

Usando com o Babel

Se você for usar o babel e importar componentes de vue de ficheiro único com a extensão .vue dentro dos seus testes, você precisará instalar o babel e transformar os ficheiros com o babel-jest.

npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0

Depois, você precisa dizer ao Jest para transformar ficheiros os .js usando o babel-jest. Você pode fazer isso adicionando a seguinte configuração dentro do package.json ou dentro de um ficheiro dedicado de configuração do Jest:

{
  "jest": {
    "transform": {
      // processa ficheiros `*.js` com o `babel-jest`
      ".*\\.(js)$": "babel-jest"
    }
  }
}

A seguir você precisa criar a configuração de babel usando os ficheiros de configuração babel.config.json ou o .babelrc.json:

{
  "presets": ["@babel/preset-env"]
}

Você pode também adicionar estas opções ao package.json:

{
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

Manipulando os apelidos (aliases) do webpack

Se você usar um resolvedor de apelidos dentro da configuração do webpack, por exemplo apelidando o @ para o /src, você precisa adicionar uma configuração de correspondência para o Jest também, usando a opção moduleNameMapper:

{
  "jest": {
    // suportar o mesmo mapeamento de apelido de `@ -> src` dentro do código fonte.
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

Cobertura de Código

O Jest pode ser usado para gerar relatórios de cobertura em vários formatos. Isto está desativado por padrão (para ambas instalação via vue-cli e para uma manual). A seguir está um exemplo simples para começar com:

Estenda a sua configuração jest com a opção collectCoverage, e depois adicione o arranjo collectCoverageFrom para definir os ficheiros para os quais a informações de cobertura devem ser coletadas.

{
  "jest": {
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
  }
}

Isto ativará os relatórios de cobertura com os relatórios de cobertura padrão. A documentação mais avançada pode ser encontrada dentro da documentação da configuração do Jest, onde você pode encontrar opções para os limites de cobertura, alvo de diretórios de saída, etc.

Usando outros executores de Teste

Executando o Vue Test Utils com o Karma

O Karma é um executor de teste que lança o navegador, executa os testes, e reporta eles de volta para nós.

Adicionalmente ao Karma, você pode desejar usar o framework Mocha para escrever os testes e a biblioteca Chai para afirmação de teste. Também, você talvez também deseja verificar o Sinon para criação de espiões e forjados.

A seguir é uma configuração básica do Karma para o Vue Test Utils:

// karma.conf.js
var webpackConfig = require('./webpack.config.js')

module.exports = function(config) {
  config.set({
    frameworks: ['mocha'],
    files: ['test/**/*.spec.js'],
    webpack: webpackConfig,
    reporters: ['spec'],
    browsers: ['Chrome'],
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    }
  })
}

Executando o Vue Test Utils com o mocha webpack

Uma outra estratégia para testar Componentes de Ficheiro Único (SFCs em Inglês) é compilar todos os nossos testes via webpack e depois executar ele dentro de um executor de teste. A vantagem desta abordagem é que ela dá para nós suporte completo para todas as funcionalidades do webpack e do vue-loader, assim nós não temos que fazer acordos dentro do nosso código-fonte.

Nós selecionamos o mochapack para fornecer uma experiência toda otimizada para esta tarefa em particular.

A primeira coisa a fazer é a instalação das dependências de teste:

npm install --save-dev @vue/test-utils mocha mochapack

Depois da instalação do Vue Test Utils e o mochapack, você precisará definir um roteiro de teste dentro do seu package.json:

// package.json
{
  "scripts": {
    "test": "mochapack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
  }
}

Executando o Vue Test Utils sem uma etapa de construção

Enquanto é comum construir aplicações em Vue usando ferramentas taís como o webpack para empacotar a aplicação, vue-loader para entregar Componentes de Ficheiro Único (SFC em Inglês), é possível usar o Vue Test Utils com muito menos. Os requisitos mínimos para a Vue Test Utils, além dela mesma são:

• Vue
• vue-template-compiler
• um DOM (seja ele jsdom dentro de um ambiente Node, ou o DOM dentro de um navegador real)

Repare que o jsdom (ou qualquer outra implementação do DOM) deve ser exigido e instalado antes da Vue Test Utils, porque ele espera um DOM (DOM real, ou JSDOM) existir.