Snapshot testing captura output de componente. Mudanças acidentais são detectadas. Útil para regression testing.
Conceitos Principais
Snapshot File
Primeiro run cria snapshot. Runs seguintes comparam. Falha se output diferente. Commit snapshots no git.
Update Snapshots
jest -u atualiza snapshots. Use quando mudança intencional. Review diff antes de commit.
Inline Snapshots
Snapshot no próprio test file. Melhor para pequenos outputs. Mais legível que arquivo separado.
Snapshot vs Traditional
Snapshots: mudanças estruturais. Traditional: comportamento específico. Use ambos.
Passo a Passo
- Create Snapshot: test("Button renders", () => { const { container } = render(); expect(container).toMatchSnapshot(); });
- Review Snapshot: __snapshots__/Button.test.js.snap contém HTML. Commit no git. CI compara com committed snapshot.
- Update Snapshot: Mude Button. Teste falha. Review diff. jest -u se mudança intencional. Commit novo snapshot.
- Inline Snapshot: expect(formatDate(date)).toMatchInlineSnapshot(
"2025-01-01"). Snapshot no test file. - Snapshot Props Only: Não snapshot HTML inteiro. Snapshot apenas props críticos: expect(props).toMatchSnapshot().
Boas Praticas
Recomendacoes
• Snapshots pequenos e focados
• Review diffs antes de update
• Não snapshot componentes grandes
• Inline snapshots para outputs simples
• Combine com testes tradicionais
Erros Comuns
Evite estes erros
• Snapshot de componentes inteiros
• Update sem review
• Snapshots como único teste
• Não commitar snapshot files
• Snapshots de timestamps ou randoms
Checklist
- Snapshots configurados
- Files commitados no git
- CI rodando snapshot tests
- Process de review definido
- Snapshots focados e pequenos