Ir para o conteúdo principal

Introdução

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

A Vue Testing Library estende a DOM Testing Library ao adicionar APIs para trabalhar com componentes Vue. Ela é construída sobre o @vue/test-utils, a biblioteca de testes oficial para Vue.

Em resumo, a Vue Testing Library faz três coisas:

  1. Reexporta utilitários e helpers de consulta da DOM Testing Library.

  2. Oculta métodos do @vue/test-utils que conflitam com o Princípio Guia da Testing Library.

  3. Ajusta alguns métodos de ambas as fontes.

Início Rápido​

Se estiver usando Vue2

npm install --save-dev @testing-library/vue@5

Se estiver usando Vue3

npm install --save-dev @testing-library/vue

Agora você pode usar todos os comandos getBy, getAllBy, queryBy e queryAllBy da DOM Testing Library. Veja aqui a lista completa de consultas.

Você também pode instalar o @testing-library/jest-dom para utilizar os matchers personalizados do Jest para o DOM.

O problema​

Você quer escrever testes sustentáveis para seus componentes Vue. Como parte desse objetivo, seus testes devem evitar incluir detalhes de implementação dos seus componentes. É melhor focar em fazer seus testes fornecerem a confiança para a qual foram projetados.

A solução​

A Vue Testing Library é uma solução extremamente leve para testar componentes Vue. Ela fornece funções utilitárias simples sobre o @vue/test-utils, incentivando práticas de teste mais eficazes.

Seu princípio guia primário é:

Quanto mais seus testes se assemelharem à forma como seu software é usado, mais confiança eles podem te dar.

Portanto, em vez de lidar com instâncias de componentes Vue renderizados, seus testes trabalharão com nós reais do DOM.

Os utilitários desta biblioteca facilitam a consulta ao DOM da mesma forma que um usuário faria. Eles permitem encontrar elementos por texto de rótulo, identificar links e botões pelo seu texto, e verificar que sua aplicação é acessível.

Ela também expõe uma maneira recomendada de encontrar elementos via data-testid como uma "saída de emergência" para elementos onde conteúdo textual e rótulo não fazem sentido ou não são práticos.