Imported from Trompetilla/Skills (skills/lxgicstudios/snapshot-writer/SKILL.md). Install upstream with npx skills add Trompetilla/Skills --skill snapshot-writer. Copyright stays with the author.

Snapshot Test Writer

Snapshot tests are the fastest way to catch unintended UI changes. But writing them for every component gets tedious fast. This tool reads your React components and generates snapshot tests automatically. It figures out the props, renders the component, and creates the snapshot assertions.

One command. Zero config. Just works.

Quick Start

npx ai-snapshot-test src/components/

What It Does

• Reads React components and generates Jest snapshot test files
• Automatically detects props and creates test cases with different prop combinations
• Handles components with context providers and wrapper dependencies
• Generates both default state and edge case snapshots
• Outputs .test.tsx files ready to run with Jest

Usage Examples

# Generate snapshot tests for all components
npx ai-snapshot-test src/components/

# Target a specific component
npx ai-snapshot-test src/components/Button.tsx

# Scan all TSX files in a directory
npx ai-snapshot-test "src/**/*.tsx"

Best Practices

• Generate snapshots early in development - Easier to maintain when you start small
• Update snapshots intentionally - When a snapshot fails, check if the change was intended before updating
• Don't snapshot everything - Focus on components with stable output. Highly dynamic components make bad snapshot candidates.
• Keep snapshot files in version control - They're your visual contract

When to Use This

• You're building a component library and need regression protection
• A redesign changed a bunch of components and you need to update test coverage
• You want to catch accidental rendering changes during refactors
• Your team requires snapshot tests but nobody wants to write them

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

• GitHub: https://github.com/LXGIC-Studios
• Twitter: https://x.com/lxgicstudios
• Substack: https://lxgicstudios.substack.com
• Website: https://lxgic.dev

Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

npx ai-snapshot-test --help

How It Works

The tool parses your React component files to extract the component signature, props interface, and any dependencies. It then generates test files that import the component, render it with various prop combinations, and create toMatchSnapshot assertions. The output is compatible with Jest's snapshot testing.

License

MIT. Free forever. Use it however you want.