Reduce visual test snapshots and cost
Every visual testing tool bills per story. Two patterns cut a component's snapshot count up to 10x with the same coverage, on UI Verify, Chromatic, or Percy.
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. 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 fewer stories is also 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, `--only-changed` skips even the dense stories a PR does not touch.
Write economical stories
Full visual coverage in the fewest billable snapshots.
How to not spend a fortune on visual testing
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 captures your UI on every pull request and an AI judge tells an intended change from a real regression. See how it works.
Get started