Create and validate component snapshots for UI regression testing. Use when performing specialized testing. Trigger with phrases like "update snapshots", "test UI snapshots", or "validate component snapshots".
npxskills add jeremylongshore/claude-code-plugins-plus-skills--skill managing-snapshot-testsLoading…
Create, update, and maintain snapshot tests for UI components and data structures using Jest, Vitest, or pytest snapshot plugins. Manages serialized output snapshots (HTML, JSON, component trees) to detect unexpected changes in rendered output.
pytest-snapshot/syrupy for Python.snap files or __snapshots__/ directory)expect(result).toMatchSnapshot() or toMatchInlineSnapshot().__snapshots__/ComponentName.test.ts.snap."renders with error state", "displays loading skeleton".jest --updateSnapshot or vitest --update after verifying changes are correct.jest --ci to detect obsolete snapshots that no longer match any test..snap files for removed components.--ci flag which treats missing snapshots as failures.toMatchObject for partial structure matching.*.test.ts or *.test.tsx) with toMatchSnapshot() assertions__snapshots__/*.snap)| Error | Cause | Solution |
|---|---|---|
| Snapshot mismatch on unrelated change | Component depends on a shared style or context provider | Isolate components with wrapper providers; mock global styles |
| Snapshot file is enormous (>1000 lines) | Entire page DOM serialized instead of target component | Narrow the snapshot scope to the specific component subtree; use container.querySelector |
| Obsolete snapshot warning | Test was renamed or deleted but .snap file remains | Run jest --updateSnapshot to remove orphaned entries; delete unused .snap files |
| Snapshot differs between local and CI | Different Node.js version or OS renders slightly different output | Pin Node.js version in CI; use toMatchInlineSnapshot for exact control |
| Non-deterministic snapshot | Component includes random keys, timestamps, or Math.random() | Mock Date.now() and Math.random(); use expect.any(String) for volatile fields |
React component snapshot test (Jest):
import { render } from '@testing-library/react';
import { Alert } from './Alert';
describe('Alert', () => {
it('renders success variant', () => {
const { container } = render(
<Alert variant="success" message="Operation completed" />
);
expect(container.firstChild).toMatchSnapshot();
});
it('renders error with inline snapshot', () => {
const { container } = render(
<Alert variant="error" message="Something failed" />
);
expect(container.firstChild).toMatchInlineSnapshot(`
<div class="alert alert-error" role="alert">
<span>Something failed</span>
</div>
`);
});
});
Custom serializer to exclude dynamic IDs:
// jest.config.ts
export default {
snapshotSerializers: ['./test/serializers/strip-ids.ts'],
};
// test/serializers/strip-ids.ts
export const serialize = (val: string) =>
val.replace(/id="[a-z0-9-]+"/g, 'id="[dynamic]"');
export const test = (val: unknown) => typeof val === 'string' && val.includes('id=');
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).