Eu sei, o teste pode parecer uma perda de tempo para muitos desenvolvedores. Você odeia isso, certo? Mas, você deveria? Você deve testar seus componentes se quiser criar um aplicativo confiável?
Vou lhe dizer o que penso: testar seus componentes (e, mais importante, fazê-lo da maneira certa) é um dos melhores investimentos que você pode se você estiver construindo algo para o longo prazo. Mas por quê?
Neste guia, vou responder a essas perguntas e resumir os benefícios de testar seus componentes Vue.js usando Vue Test Utils compartilhando algumas histórias que aconteceram comigo. 
Cobriremos o seguinte:
Por que você deve testar os componentes Vue.js? Como você deve testar os componentes do Vue.js? O que é o Vue Test Utils? Testando componentes Vue.js com Vue Test Utils
Por que você deve testar componentes Vue.js?
Quando você está enviando código para produção , você não quer introduzir bugs. Se você for um desenvolvedor talentoso que conhece sua base de código de dentro para fora, talvez não (isso dito, tenho visto muitos engenheiros excelentes e autoconfiantes introduzirem condições raras que eles não previram).
Mas o que acontece quando você está sobrecarregado com muito trabalho porque sua empresa está crescendo e você precisa contratar alguns juniores para continuar melhorando o produto? Eles vão introduzir bugs? Provavelmente com mais frequência do que você pensa.
Quando um desenvolvedor júnior empurra algo que está quebrando um de seus recursos mais essenciais, em um mundo perfeito, você gostaria de ser notificado antes que chegue aos servidores de produção. Se sua base de código for testada corretamente, um dos testes falhará e você será capaz de corrigir o problema antes que qualquer dano seja feito.
Esta é uma razão importante pela qual você deve testar sua base de código se você for construindo um projeto de longo prazo: os desenvolvedores trabalham em equipe e devem proteger uns aos outros. Algumas empresas até mudaram a forma como codificam, introduzindo uma metodologia como desenvolvimento orientado a teste (TDD) em seu fluxo de trabalho. Resumindo, isso significa que você escreve os testes (ou seja, as especificações) antes de codificar a lógica de negócios.
Outra razão pela qual você deve testar se seus componentes estão funcionando corretamente é que isso fornece documentação para cada um. Ao ler os testes (que demonstraremos nas próximas seções), podemos ver qual saída podemos esperar para uma determinada entrada (um prop, um evento, etc.). E, como você provavelmente já sabe, uma documentação excelente facilita a depuração. 
Mas se você me perguntar o que eu mais amo em testes, é como a refatoração pode se tornar produtiva. Quando comecei meu caminho único de me tornar um desenvolvedor web há alguns anos, aprendi rapidamente que uma base de código não é estática e muda muito com o tempo. Em outras palavras, você deve refatorar alguma parte dele todas as semanas.
Lembro-me de quando o gerente de produto me pediu para introduzir um sub-recurso em uma das interfaces mais críticas. Infelizmente para mim, foi necessária uma refatoração completa de muitos componentes para fazê-lo funcionar. Eu estava com medo de quebrar alguma coisa, mas esse medo desapareceu rapidamente. Depois de terminar a refatoração, fiquei muito feliz em ver que todos os testes foram aprovados sem gerar nenhum erro.
A confiança é a chave! Na verdade, este é mais um benefício de testar os componentes do Vue.js. Quando você tem certeza de que seu código está funcionando corretamente, pode ter certeza de que não está enviando um software corrompido. 
Se você ainda não está convencido, aqui está mais o que pensar: corrigir problemas costuma ser muito mais caro do que evitá-los. O tempo que leva para escrever seus testes vale a pena.
Como você deve testar os componentes Vue.js?
É essencial falar sobre o que devemos testar. Para componentes de IU, não recomendo testar cada linha de código. Isso pode levar a muito foco na implementação interna do componente (ou seja, atingindo 100 por cento de cobertura de teste).
Em vez disso, devemos escrever testes que declarem a interface pública do componente e a tratem como um preto interno caixa. Um único caso de teste afirmaria que alguma entrada (ações do usuário, adereços, armazenamento) fornecida aos resultados do componente na saída esperada (renderização do componente, eventos de vue, chamadas de função, etc.).
Além disso, por último ano, assisti a uma ótima palestra de Sarah Dayan intitulada “ Test-Driven Development with Vue.js ”no Vue Amsterdam. Em um de seus slides, ela disse que para determinar se você deve testar um de seus componentes (ou um recurso dentro dele), você deve se perguntar: eu me importo com isso se mudar? Em outras palavras, é um recurso que pode causar problemas nas interfaces se alguém o quebrar? Nesse caso, você deve escrever um teste para fortalecer seu código.
O que é Vue Test Utils?
Vamos falar sobre o elefante na sala agora. O que é o Vue Test Utils? 
Vue Test Utils é uma biblioteca oficial de funções auxiliares para ajudar os usuários testar seus componentes Vue.js. Ele fornece alguns métodos para montar e interagir com componentes Vue.js de maneira isolada. Nós nos referimos a isso como um invólucro. Mas o que é um invólucro?
Um invólucro é uma abstração do componente montado. Ele fornece algumas funções utilitárias que facilitam nossas vidas, como quando queremos acionar um clique ou um evento. Usaremos isso para executar alguma entrada (ações do usuário, adereços, armazenar alterações, etc.) para que possamos verificar se a saída está correta (renderização de componente, eventos Vue, chamadas de função, etc.).
O que é notável é que você pode obter a instância do Vue com wrapper.vm se não tiver o que precisa no wrapper. Portanto, você tem muita flexibilidade.
Você pode encontrar todas as propriedades e métodos disponíveis no wrapper no Documentação do Vue Test Utils .
O Vue Test Utils também permite que os componentes de simulação e stub sejam renderizados com shallowMount ou stubs individuais, mas vamos chegar a isso mais tarde. Então, sim, esta é uma biblioteca muito completa e confiável que você vai adorar. 
Testando componentes Vue.js com utilitários de teste Vue
Agora é hora de colocar a mão na massa e começar a testar nossos componentes com o Vue Test Utils.
Configure a infraestrutura
Você pode escolher entre dois executores de teste: Jest ou Mocha e Chai . Iremos com Jest neste tutorial porque é recomendado usar Vue Test Utils com Jest .
Se você não está familiarizado com o Jest, é um executor de teste desenvolvido pelo Facebook. O objetivo é fornecer uma solução de teste de unidade com baterias incluídas.
Se você estiver usando a CLI do Vue para construir seu projeto, aqui está como você pode configurar o Vue Test Utils em seu aplicativo Vue atual.
Para uma instalação manual, siga o guia de instalação nos documentos.
bash vue add unit-jest npm install–save-dev @ vue/test-utils
Você deve agora veja um novo comando adicionado a package.json que usaremos para executar nossos testes.
json {“scripts”: {“test: unit”:”vue-cli-service test: unit”}}
Testando nosso HabitComponent
Agora é hora de criar nosso primeiro conjunto de testes. Para nosso exemplo, criaremos um rastreador de hábitos. Ele será composto de um único componente, que chamaremos de Habit.vue, que marcaremos toda vez que concluirmos o hábito. Dentro da pasta de componentes, copie/cole o código abaixo:
vue
O componente aceita um único adereço (o título do hábito) e inclui uma caixa que fica verde quando clicamos nele (ou seja, o hábito está completo).
Na pasta de testes na raiz do seu projeto, crie um Habit.spec.js. Vamos escrever todos os nossos testes dentro dele.
Vamos começar criando o objeto wrapper e escrever nosso primeiro teste.
javascript import {mount} from”@ vue/test-utils”; importar Hábito de”@/componentes/Hábito”; describe (“Habit”, ()=> {it (“garante que o nome do hábito seja renderizado”, ()=> {const habitName=”Aprenda algo novo”; const wrapper=mount (Habit, {propsData: {name: habitName,},}); expect (wrapper.props (). name).toBe (habitName); expect (wrapper.text ()). toContain (habitName);});});
Se você executar npm run test: unit, verá que todos os testes foram bem-sucedidos.
bash> vue-cli-service test: unit PASS tests/unit/Habit.spec.js Habit ✓ garante que o o nome do hábito é processado (11ms) Suítes de teste: 1 aprovado, 1 total de testes: 1 aprovado, 1 total de instantâneos: 0 Tempo total: 1.135s Executou todos os conjuntos de teste.
Agora vamos verificar se nosso hábito está marcado quando clicamos na caixa.
javascript it (“marca o hábito como concluído”, async ()=> {const wrapper=mount (Habit, {propsData: { name:”Aprenda algo novo”,},}); const box=wrapper.find (“. habit__box”); await box.trigger (“click”); expect (box.text ()). toContain (“✔”);});
Observe como o teste deve ser assíncrono e que o gatilho deve ser aguardado. Confira o artigo “ Testando comportamento assíncrono ” no Vue Test Utils docs para entender por que isso é necessário e outras coisas a considerar ao testar cenários assíncronos.
bash> vue-cli-service test: unit PASS tests/unit/Habit.spec.js Habit ✓ garante o nome do hábito é renderizado (11ms) ✓ marca o hábito como concluído (10ms) Test Suites: 1 aprovado, 1 Testes totais: 2 aprovados, 2 Snapshots totais: 0 Tempo total: 1,135s Executou todos os suites de teste.
Também podemos verificar se o método onHabitDone é chamado quando clicamos nele.
javascript it (“chama o método onHabitDone”, async ()=> {const wrapper=mount (Habit, {propsData: { nome:”Aprenda algo novo”,},}); wrapper.setMethods ({onHabitDone: jest.fn (),}); const box=wrapper.find (“. habit__box”); await box.trigger (“click”); esperar (wrapper.vm.onHabitDone).toHaveBeenCalled ();});
Execute npm run test: unit e tudo deve estar verde.
Aqui está o que você deve ver em seu terminal:
bash> vue-cli-service test: unit PASS tests/unit/Habit.spec.js Habit ✓ garante que o nome do hábito seja processado (11ms) ✓ marca o hábito como concluído (10ms) ✓ chama o método onHabitDone (2ms) Test Suites: 1 aprovado, 1 total de testes: 3 aprovados, 3 instantâneos no total: 0 Tempo total: 1.135s Executou todos os conjuntos de testes.
Podemos até verificar se o componente se comporta conforme o esperado quando mudamos um prop.
javascript it (“updates the habit method”, async ()=> {const wrapper=mount (Habit, {propsData: { name:”Aprenda algo novo”,},}); const newHabitName=”Escovar meus dentes”; await wrapper.setProps ({name: newHabitName,}); expect (wrapper.props (). name).toBe (newHabitName) ;});
Aqui está o que você deve ver em seu terminal:
bash> vue-cli-service test: unit PASS tests/unit/Habit.spec.js Habit ✓ garante que o nome do hábito é renderizado (11ms) ✓ marcas o hábito como concluído (10ms) ✓ chama o método onHabitDone (2ms) ✓ atualiza o método do hábito (2ms) Test Suites: 1 aprovado, 1 total de testes: 4 aprovados, 4 instantâneos total: 0 total Tempo: 1.135s Executou todas as suítes de teste.
Para ajudá-lo a codificar mais rápido, aqui estão os métodos de wrapper que mais uso:
wrapper.attributes (): Retorna o objeto de atributo do nó DOM do Wrapper wrapper.classes (): Retorna as classes do nó DOM do Wrapper wrapper.destroy ( ): Destrói uma instância do componente Vue wrapper.emitted (): Retorna um objeto contendo eventos personalizados emitidos pelo Wrapper vm wrapper.find (): Retorna o Wrapper do primeiro nó DOM ou componente Vue correspondente ao seletor wrapper.findAll (): Retorna um WrapperArray wrapper.html (): Retorna HTML do nó DOM do Wrapper como um string wrapper.isVisible (): Assert Wrapper é visível wrapper.setData (): Define Wrapper vm data wrapper.setProps (): Define Wrapper vm props e força o update wrapper. text (): Retorna o conteúdo de texto de Wrapper wrapper.trigger (): dispara um evento de forma assíncrona no nó DOM Wrapper
Usando fetch
Se você usar o método fetch dentro de seu componente para chamar uma API, você obterá um erro. Veja como você pode ter certeza de que fetch está definido durante seus testes.
bash npm install-D isomorphic-fetch
Em seguida, atualize seu package.json.
json {“scripts”: {“test: unit”:”vue-cli-service test: unit–require isomorphic-fetch”}}
mount vs. shallowMount
Você pode descobrir que algumas pessoas estão usando shallowMount em vez de mount. O motivo é que, como o mount, ele cria um wrapper que contém o componente Vue.js montado e renderizado, mas com componentes-filho em stub.
Isso significa que o componente será renderizado mais rápido porque todos os seus componentes-filhos serão não pode ser calculado. Porém, tenha cuidado; esta abordagem pode levar a alguns problemas se você estiver tentando testar algo vinculado a um componente de uma criança.
Para onde vamos a partir daqui?
A documentação do Vue Test Utils é excelente recurso para ajudá-lo a começar-especialmente os guias , que são atualizados todos os meses. A página com todos os métodos de wrapper e a API Jest são recursos excelentes que você também deve marcar.
Lembre-se, praticar e escrever seus testes para seu projeto é a melhor maneira de começar a aprender. Espero que este guia ajude você a compreender como os testes de seus componentes podem ser robustos. E que isso não é muito difícil.
Terminaremos este guia com uma citação do renomado cientista da computação Donald Knuth: “Os computadores são bons em seguir instruções, mas não em ler sua mente.”
Ficaria feliz em ler seus comentários e suas mensagens no Twitter @ RifkiNada . E caso você esteja curioso sobre meu trabalho, você pode conferir em NadaRifki.com .
