Ir para o conteúdo principal

React Testing Library

[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 React Testing Library se baseia na DOM Testing Library ao adicionar APIs para trabalhar com componentes React.

Instalação​

Para começar com a React Testing Library, instale-a junto com sua dependência peer @testing-library/dom:

npm install --save-dev @testing-library/react @testing-library/dom

Com TypeScript​

Para ter cobertura total de tipos, você também precisa instalar os tipos para react e react-dom:

npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom

O problema​

Você deseja escrever testes sustentáveis para seus componentes React. Parte desse objetivo envolve evitar que seus testes incluam detalhes de implementação dos componentes, focando em proporcionar a confiança que eles devem oferecer. Além disso, você quer que sua base de testes seja sustentável a longo prazo, para que refatorações (mudanças na implementação sem alterar funcionalidades) não quebrem seus testes ou atrasem você e sua equipe.

A solução​

A React Testing Library é uma solução extremamente leve para testar componentes React. Ela oferece funções utilitárias simples sobre react-dom e react-dom/test-utils, incentivando práticas de teste mais eficazes. Seu princípio fundamental é:

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

Em vez de lidar com instâncias de componentes React renderizados, seus testes trabalharão com nós DOM reais. Os utilitários desta biblioteca facilitam consultar o DOM da mesma forma que um usuário faria: encontrando elementos de formulário pelo texto do rótulo (como um usuário), identificando links e botões por seu texto (como um usuário). Ela também oferece uma forma recomendada de encontrar elementos via data-testid como "válvula de escape" para casos onde texto e rótulo são impraticáveis ou não fazem sentido.

Esta biblioteca incentiva seus aplicativos a serem mais acessíveis e permite que seus testes se aproximem de como um usuário utilizaria seus componentes, o que proporciona mais confiança de que seu aplicativo funcionará quando um usuário real o utilizar.

Esta biblioteca substitui o Enzyme. Embora você possa seguir estas diretrizes com o próprio Enzyme, fazer isso é mais difícil devido aos utilitários extras que ele fornece (e que facilitam testar detalhes de implementação). Leia mais sobre isso no FAQ.

O que esta biblioteca não é:

  1. Um test runner ou framework

  2. Específica para um framework de testes (embora recomendemos Jest, a biblioteca funciona com qualquer framework. Veja Usando sem Jest)

NOTA: Esta biblioteca é construída sobre a DOM Testing Library, onde reside a maior parte da lógica por trás das queries.

Tutoriais​

Confira o vídeo "O que é React Testing Library?" abaixo para uma introdução à biblioteca.

what is react testing library

Além disso, não perca este tutorial sobre React Testing Library.