Snapshot Testing Engine: AST Serializers, File Formatting, and Inline Snapshots

Snapshot testing captures serialized representations of data structures or rendered DOM trees to prevent unintentional regression changes over time.

Vitest supports two snapshot formats:

1. External Snapshots (toMatchSnapshot()): Written to __snapshots__/*.snap files alongside the test file.
2. Inline Snapshots (toMatchInlineSnapshot()): Written directly into the test file source code using SWC/Babel AST transformation.

import { test, expect } from 'vitest';

test('matches external snapshot', () => {
  const user = { id: 101, role: 'admin', permissions: ['read', 'write'] };
  expect(user).toMatchSnapshot();
});

test('matches inline snapshot', () => {
  const user = { id: 102, role: 'member' };
  expect(user).toMatchInlineSnapshot(`
    {
      "id": 102,
      "role": "member",
    }
  `);
});

Custom Snapshot Serializers

When data contains dynamic fields (like generated timestamps or random UUIDs), standard snapshot matching fails. You can register custom snapshot serializers to sanitize output:

import { expect } from 'vitest';

expect.addSnapshotSerializer({
  serialize(val, config, indentation, depth, refs, printer) {
    return `[User ID: ${val.id}]`;
  },
  test(val) {
    return val && typeof val === 'object' && 'id' in val && 'role' in val;
  },
});