Snapshot inline

Définition

Variante du test de snapshot où la valeur sérialisée est écrite directement dans le fichier de test (toMatchInlineSnapshot) au lieu d'un fichier .snap séparé. Le framework (Jest, Vitest) remplit l'argument au premier passage et le met à jour avec l'option -u. La valeur attendue est visible à côté du code, ce qui rend la revue de code plus honnête et évite les fichiers .snap acceptés à l'aveugle.

Analogie

Coller la photo de référence dans le cahier, à côté de l'exercice, plutôt que dans une pochette au fond du tiroir qu'on n'ouvre jamais.

Exemple de code

import { test, expect } from 'vitest';
import { formatPrice } from './price';
test('formate en euros', () => {
  // 1er run : vitest écrit la valeur ici ; -u pour la mettre à jour
  expect(formatPrice(1234.5, 'fr-FR')).toMatchInlineSnapshot(`"1 234,50 €"`);
});
test('erreur structurée', () => {
  expect(parseOrder('{}')).toMatchInlineSnapshot(`
    {
      "ok": false,
      "errors": ["items: requis"],
    }
  `);
});

Cas d'usage

Petites sorties (messages d'erreur, objets courts, HTML rendu réduit) où voir la valeur attendue dans le test aide le relecteur.

Anti-pattern

Termes liés

Sources

• vitest.dev/blog/vitest-4
• jestjs.io/blog/2025/06/04/jest-30