Snapshot Test

Testing 🟢 Junior

Definition

Test qui capture la sortie d'un composant (HTML, JSON) et la compare a une reference enregistree. Toute difference inattendue fait echouer le test.

Analogie

Comme prendre une photo de votre salon et comparer chaque jour : si un meuble a bouge, vous le detectez immediatement.

Exemple de code

// Button.test.jsx
import { render } from '@testing-library/react';

test('Button matches snapshot', () => {
  const { container } = render(
    <Button variant="primary">Click</Button>
  );
  expect(container).toMatchSnapshot();
});

Cas d'usage

Pour detecter les changements involontaires dans le rendu des composants UI.

Anti-pattern

Mettre a jour les snapshots en masse sans les relire (--update), ce qui valide des regressions sans le savoir.

Termes lies

#testing#frontend#react