Snapshots no Jest DOM
Os snapshots no Jest DOM são uma ferramenta poderosa para verificar e rastrear alterações em componentes React ao longo do tempo. Essa abordagem simplifica a criação e manutenção de testes visuais, permitindo que os desenvolvedores capturem a representação serializada de um componente e a comparem com versões futuras para identificar mudanças não intencionais.
Criando e Atualizando Snapshots
Ao escrever um teste com snapshots, o Jest DOM gera automaticamente um arquivo de snapshot no primeiro teste e o utiliza como referência nas execuções subsequentes. Se houver alterações no componente, o Jest DOM alertará sobre as discrepâncias e fornecerá opções para aceitar ou rejeitar as alterações.
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';
const props = {
id: 1,
title: "title 1",
body: "body 1",
cover: "img/img.png"
};
it("should match snapshot", () => {
const { container } = render(<PostCard {...props} />);
expect(container.firstChild).toMatchSnapshot();
});Ao executar este teste pela primeira vez, o Jest DOM cria um arquivo de snapshot. Nas execuções subsequentes, ele compara o snapshot atual com o snapshot salvo anteriormente no diretório __snapshots__. É fundamental que esse diretório seja versionado pelo Git e enviado para o GitHub.
Customizando Snapshots
É possível customizar snapshots para cenários específicos, como quando se lida com dados dinâmicos ou props variáveis. O Jest DOM oferece opções para atualizar snapshots, aceitar alterações, ou até mesmo gerar snapshots interativos.
Vantagens dos Snapshots
-
Fácil manutenção: Os snapshots simplificam a manutenção, especialmente em componentes que geram uma saída visual significativa. É mais fácil revisar e aceitar alterações visuais do que reescrever testes.
-
Detecção de alterações inesperadas: Os snapshots ajudam a detectar mudanças não intencionais no componente. Se algo foi alterado, o desenvolvedor é notificado durante a execução do teste.
-
Integração com ferramentas: Os snapshots podem ser integrados com ferramentas de CI/CD, permitindo a execução automática de testes visuais em ambientes de integração contínua.