Managing Snapshot Tests

What it does

When your agent uses it

• Performing specialized testing
• With phrases like update snapshots
• Test UI snapshots
• Validate component snapshots

Example prompts

• “update snapshots”
• “test UI snapshots”
• “validate component snapshots”
• “/managing-snapshot-tests”

Requirements

• Python 3
• Node.js
• Compatibility (from SKILL.md): Designed for Claude Code
• Pre-approved tools (allowed-tools): Read, Write, Edit, Grep, Glob, Bash(test:snapshot-*)

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

1. 1Identify components and data structures suitable for snapshot testing
2. 2Write snapshot tests for each target
3. 3Organize snapshot files
4. 4Review and update snapshots when intentional changes occur
5. 5Clean up obsolete snapshots
6. 6Set up CI to fail on snapshot mismatches without auto-updating
7. 7Consider property-based snapshot alternatives for large components

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Write
  • Edit
  • Grep
  • Glob
  • Bash(test:snapshot-*)

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/, which the agent can run.

  Shell commands in SKILL.md call:

  • jest
  • vitest

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • jestjs.io
  • vitest.dev
  • testing-library.com
  • kentcdodds.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Designed for Claude Code

  From compatibility in the SKILL.md frontmatter.

Context cost

Managing Snapshot Tests loads about 1.4k tokens when it runs, and up to ~1.5k if it reads all its reference files. Until then it costs about 58 tokens; SKILL.md has 513 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~58

When it runs · the whole SKILL.md, loaded when a task matches

~1.4k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 513 words, ~1,447 tokens.

name

managing-snapshot-tests

description

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".

allowed-tools

Read, Write, Edit, Grep, Glob, Bash(test:snapshot-*)

compatibility

Designed for Claude Code

version

1.21.0

author

Jeremy Longshore <jeremy@intentsolutions.io>

license

MIT

tags

testing, snapshot-tests

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>
    `);
  });
});

// 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=');

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (scripts, references, assets) in skills/.curated/managing-snapshot-tests of jeremylongshore/tons-of-skills-marketplace.

• SKILL.md
• assets/README.md
• references/README.md
• scripts/README.md

Open the folder on GitHubat commit cfae287