Reduce visual test snapshots and cost
Visual testing tools like UI Verify, Chromatic and Percy bill per snapshot. Two story patterns cut a component's snapshots up to 10x with the same coverage.
So the story count is both your bill and your noise surface: more stories means more billable snapshots, and more places for a diff to flake. Chromatic's pricing page counts its plans in snapshots a month, and Percy's in screenshots rendered, one per browser and width (both checked 2026-10-17). The naive one-story-per-variant-per-state-per-theme pattern explodes fast - a three-size, three-variant button in light and dark is already 18 snapshots. Two moves collapse it while keeping full coverage.
Collapse a variant matrix into one gallery story
A Button does not need separate Primary, Secondary, and Tertiary stories. Map through the prop combinations in one AllVariants story and render them in a grid. One screenshot then covers the whole matrix, and you get a single glanceable view of every permutation.
// ONE story covers every size x variant
export const AllVariants = () => (
<div style={{ display: 'grid', gap: 16, gridTemplateColumns: 'repeat(3, max-content)' }}>
{(['sm', 'md', 'lg'] as const).flatMap((size) =>
(['primary', 'secondary', 'danger'] as const).map((variant) => (
<Button key={`${size}-${variant}`} size={size} variant={variant}>
{size}/{variant}
</Button>
)),
)}
</div>
);
// 9 buttons, 1 snapshot instead of 9.Drive component states from data
Same idea for a component that loads data. Instead of a Loading, Empty, and Error story each, pass the response shape straight in and let one AllStates story map through the shapes. Deterministic input in, deterministic pixels out, many states, few shots.
Why do fewer stories mean less flake?
Every story is a place a diff can flake. Collapsing thirty near-identical stories into three dense ones does not just shrink the bill - it shrinks the number of surfaces a false positive can appear on. Cheaper and quieter are the same move. On top of this, skipping unchanged stories leaves out even the dense stories a PR does not touch.
Write economical visual tests
Full visual coverage in the fewest billable snapshots.
How I cut my Chromatic bill 10x (works on any visual testing tool)
Visual regression tools bill per snapshot, so story count is the bill. Two changes to how I write stories cut mine roughly 10x, same coverage, on Chromatic or any per-snapshot tool. Here they are.
Visual testing for agents
UI Verify is visual regression testing for Playwright, Storybook and Vitest. Your coding agent sees what its UI change did and fixes it before users see it. See how it works.
Get started