From harness-claude
Guides selective snapshot testing for stable outputs like JSON, HTML, errors, and component renders using Vitest/Jest in TypeScript, with inline/partial patterns and avoidance rules.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Use snapshot testing selectively for stable outputs, knowing when to avoid it
Creates and manages snapshot tests for UI components and data using Jest, Vitest, or pytest to detect regressions in rendered output.
Assists with snapshot test operations using Jest and pytest for unit testing, integration testing, mocking, and TDD practices. Generates code and configurations.
Provides TypeScript testing patterns using Vitest for unit tests, MSW for API mocking, typed mocks for dependency injection, and snapshot testing.
Share bugs, ideas, or general feedback.
Use snapshot testing selectively for stable outputs, knowing when to avoid it
it('serializes user data correctly', () => {
const user = formatUser({ id: '1', name: 'Alice', email: 'alice@test.com' });
expect(user).toMatchSnapshot();
});
First run creates the snapshot file. Subsequent runs compare against it.
it('formats the error message', () => {
const error = formatError({ code: 404, resource: 'User' });
expect(error).toMatchInlineSnapshot(`"User not found (404)"`);
});
Vitest/Jest auto-fills the inline snapshot on first run.
it('creates a user with generated fields', () => {
const user = createUser({ name: 'Alice' });
expect(user).toMatchSnapshot({
id: expect.any(String),
createdAt: expect.any(Date),
});
});
This snapshots the structure but uses matchers for non-deterministic fields.
vitest --update # or vitest -u
Review the diff before committing updated snapshots.
it('generates correct SQL', () => {
const query = buildQuery({ table: 'users', where: { role: 'admin' } });
expect(query).toMatchInlineSnapshot(`
"SELECT * FROM users WHERE role = 'admin'"
`);
});
it('generates correct API response', () => {
const response = buildResponse(testData);
expect(response).toMatchSnapshot(); // Stored in __snapshots__/
});
Avoid snapshots for:
Good snapshot candidates:
Snapshot testing captures the serialized output of a value and compares it against a stored reference. It is a regression detection tool — it tells you when output changes, but not whether the change is correct.
Snapshot workflow:
__snapshots__/ or inline)--update flag and review the diffSnapshot hygiene:
toMatchInlineSnapshot for values under 5 lines — inline snapshots are easier to reviewtoMatchSnapshot vs toMatchInlineSnapshot:
Trade-offs:
https://vitest.dev/guide/snapshot.html