Ir para o conteúdo principal

Jest 14.0: Testes de Snapshot da Árvore React

· 5 min de leitura"
Christoph Nakazawa
Christoph Nakazawa
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 →

Uma das filosofias do Jest é fornecer uma experiência integrada de "configuração zero". Queremos tornar o mais simples possível escrever testes úteis e de qualidade. Observamos que quando engenheiros recebem ferramentas prontas para uso, eles acabam escrevendo mais testes, o que resulta em bases de código estáveis e saudáveis.

Uma grande questão em aberto era como escrever testes para React com eficiência. Existem várias ferramentas como ReactTestUtils e enzyme. Ambas são ótimas e amplamente utilizadas. Porém, engenheiros frequentemente relatavam gastar mais tempo escrevendo testes do que o próprio componente. Como resultado, muitos deixaram de escrever testes completamente, levando a instabilidades. O que esses profissionais realmente queriam era garantir que seus componentes não mudassem inesperadamente.

Em parceria com a equipe do React, criamos um novo renderizador de testes e adicionamos testes de snapshot ao Jest. Veja este teste de exemplo para um simples componente Link:

import renderer from 'react-test-renderer';
test('Link renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Na primeira execução desse teste, o Jest cria um arquivo de snapshot com este aspecto:

exports[`Link renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function bound _onMouseEnter]}
  onMouseLeave={[Function bound _onMouseLeave]}>
  Facebook
</a>
`;

O artefato de snapshot deve ser commitado junto com as alterações de código. Usamos o pretty-format para tornar os snapshots legíveis durante revisões. Nas execuções subsequentes, o Jest compara a saída renderizada com o snapshot anterior. Se coincidirem, o teste passa. Se divergirem, ou a implementação mudou (requerendo atualização com jest -u) ou o teste encontrou um bug que precisa ser corrigido.

Se alterarmos o endereço do componente Link em nosso exemplo, o Jest mostrará:

teste de snapshot

Agora você sabe que deve aceitar as alterações com jest -u ou corrigir o componente se as mudanças foram acidentais. Para experimentar: clone o exemplo de snapshot, modifique o componente Link e execute o Jest. Atualizamos o Tutorial de React com um guia sobre testes de snapshot.

Este recurso foi desenvolvido por Ben Alpert e Cristian Carlesso.

Suporte experimental para React Native​

Ao criar um renderizador de testes independente de plataforma, finalmente conseguimos suportar uma versão completa do React Native sem mocks. Lançamos com entusiasmo o suporte experimental via pacote jest-react-native.

Comece usando Jest com react-native executando yarn add --dev jest-react-native e adicionando o preset à configuração do Jest:

"jest": {
  "preset": "jest-react-native"
}
"message": "informação"

O preset atualmente implementa apenas o mínimo necessário para iniciar testes com React Native. Esperamos contribuições da comunidade para aprimorá-lo. Teste e reporte issues ou envie pull requests!

Por que testes de snapshot?​

Nos apps nativos do Facebook, usamos "testes de snapshot": um sistema que renderiza componentes, captura telas e compara com versões anteriores. Se houver divergência, ou a mudança foi inesperada ou a screenshot pode ser atualizada para refletir a nova versão do componente.

Embora esta fosse a solução que queríamos para a web, também identificamos vários problemas nesses testes de ponta a ponta que os testes de integração com snapshots resolvem:

  • Sem instabilidade: Como os testes rodam em um executor de linha de comando em vez de navegadores ou dispositivos reais, não há necessidade de esperar builds, abrir navegadores, carregar páginas nem manipular interfaces para alcançar estados esperados - processos que costumam gerar flakiness e poluir resultados.

  • Iteração rápida: Engenheiros precisam de resultados em segundos, não minutos ou horas. Testes lentos (como em muitos frameworks end-to-end) desestimulam execução frequente e até mesmo sua criação.

  • Depuração simplificada: É mais fácil debugar diretamente no código JS dos testes de integração do que recriar cenários de testes visuais e analisar diferenças em imagens.

Por acreditarmos que snapshot testing tem valor além do Jest, modularizamos o recurso no pacote jest-snapshot. Colaboraremos com a comunidade para torná-lo mais genérico, permitindo integração com outros runners de teste e compartilhamento de conceitos.

Para ilustrar, um engenheiro do Facebook descreve como snapshot testing transformou seu fluxo:

“O maior desafio era manter arquivos de entrada/saída sincronizados. Cada pequena mudança exigia atualização manual de todos os outputs. Com snapshots, eles são gerados automaticamente! Basta inspecionar as atualizações do Jest em vez de ajustar arquivos manualmente.” – Kyle Davis no projeto fjs.

Próximos passos para o Jest​

Com Aaron Abramov agora integrando a equipe em tempo integral, focaremos em melhorias para nossa infraestrutura de testes nos próximos meses:

  • Substituir o Jasmine: Matchers do Jasmine estão sendo migrados para permitir novos recursos e remover esta dependência pouco ativa.

  • Cobertura de código: Estamos reescrevendo o sistema para corrigir edge cases e problemas herdados da era pré-Babel.

  • Experiência do desenvolvedor: Aprimoraremos configuração, depuração, CLI e documentação.

  • Mocking: Reformularemos o sistema (especialmente mocks manuais) para torná-lo mais intuitivo e robusto.

  • Performance: Otimizações contínuas para grandes codebases.

Dúvidas ou interesse em contribuir? Conte conosco!