Snapshot Testing

Resumen

Un snapshot test guarda la salida de un componente —HTML renderizado, JSON, estructura de datos— la primera vez que se ejecuta. En ejecuciones posteriores, compara la salida actual con el snapshot guardado. Si difieren, el test falla y el desarrollador decide si el cambio es intencional —actualiza el snapshot— o es un bug.

Popularizado por Jest para componentes React, el snapshot testing es rápido de escribir pero riesgoso si se usa sin criterio: actualizar snapshots sin revisarlos es equivalente a no tener test.

Alcance y supuestos

Cubre snapshot testing, uso con Jest y buenas prácticas. Asume familiaridad con testing.

Modelo mental

Una foto del tablero del auto antes de llevarlo al taller. Al devolverlo, comparás la foto con el estado actual. Si el velocímetro está en una posición distinta, algo pasó.

Uso práctico

• ✅ Componentes de UI, outputs de APIs, configuraciones.
• ❌ Snapshots enormes que nadie revisa cuando fallan.

Ejemplo trabajado: snapshot de componente React

test("renderiza botón correctamente", () => {
  const tree = renderer.create(<Button label="Guardar" />).toJSON();
  expect(tree).toMatchSnapshot();
});

Evidencia

• Jest popularizó los snapshots. Storybook tiene snapshot testing visual con Chromatic y Percy.