Introdução ao Jest DOM
O Jest DOM é uma extensão da biblioteca de testes Jest, projetada para simplificar e aprimorar a escrita de testes para manipulação e interação com o DOM (Document Object Model) em aplicações JavaScript, especialmente aquelas desenvolvidas com bibliotecas e frameworks como o React, Vue.js e Angular.
Principais recursos
Matchers para DOM
O Jest DOM fornece uma série de “matchers” (comparadores) específicos para interações com o DOM. Esses matchers tornam mais fácil e expressivo verificar se elementos HTML possuem determinadas características, como classes, valores de atributos, conteúdo e muito mais.
// Exemplo de Uso de Matchers do Jest DOM
expect(element).toHaveClass('minha-classe');
expect(outraElement).toHaveAttribute('disabled');
expect(meuElemento).toHaveTextContent('Texto esperado');Simulação de eventos
Facilita a simulação de eventos do DOM, como cliques, mudanças e submissões de formulários. Isso permite testar de forma eficaz o comportamento de componentes em resposta a diferentes interações do usuário.
// Exemplo de Simulação de Evento com Jest DOM
fireEvent.click(botao);
fireEvent.change(input, { target: { value: 'Novo valor' } });Consultas de elementos simplificadas
Oferece métodos simplificados para consultar elementos no DOM, tornando mais fácil selecionar e interagir com elementos específicos durante os testes.
// Exemplo de Consulta de Elemento com Jest DOM
const meuElemento = getByTestId('meu-elemento');Asserções mais intuitivas
As asserções fornecidas pelo Jest DOM são projetadas para serem intuitivas e expressivas, facilitando a compreensão dos testes e a identificação rápida de problemas.
// Exemplo de Assertiva com Jest DOM
expect(meuElemento).toBeInTheDocument();Configuração inicial
Para começar a usar o Jest DOM, geralmente é necessário configurar e integrar a biblioteca em seus testes. Isso envolve a instalação do Jest, Jest DOM e a configuração do ambiente de teste. Exemplos de configurações podem incluir:
# Instalação do Jest e Jest DOM
npm install --save-dev jest @testing-library/jest-dom
# Configuração Básica do Jest (arquivo jest.config.js)
module.exports = {
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};