# Test Snapshot

> Capture and compare UI/component snapshots to detect visual changes. Use when testing UI rendering, before visual changes, or for design systems.

- Skill: `dhaupin/test-snapshot` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dhaupin/test-snapshot`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dhaupin/test-snapshot/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: dhaupin (https://skillmd.com/u/dhaupin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dhaupin/test-snapshot

---


# Test Snapshot

> Visual regression testing.

## When To Use

- UI testing
- Component libraries
- Design systems

### Compare Snapshots

```javascript
expect(component).toMatchSnapshot()
```

---

## Tools

| Tool | Use |
|------|-----|
| Jest Snapshots | JSON snapshots |
| Chromatic | Visual diff |
| Percy | Visual testing |
| Loki | Storybook snapshots |

---

## Output

```
## Snapshots

| Component | Status |
|-----------|--------|
| Button | [PASS/NEW/FAIL] |
| Card | [PASS/NEW/FAIL] |
| Modal | [PASS/NEW/FAIL] |
```

**Role**: Snap Tester  
**Input**: UI  
**Output**: Diff results