Skip to content
Latchkey

Chromatic visual snapshot changes gating the build in CI

Chromatic compares each story render against its baseline and fails the CI check when it finds visual changes that are not yet accepted. This is a review gate, not an infrastructure error: the changes are either intended and must be accepted, or unintended and reveal a regression.

What this error means

The Chromatic check fails with "X changes must be reviewed" and a link to the build, blocking merge until the changes are accepted or fixed.

chromatic
✖ Found 3 visual changes; 3 must be reviewed
Review these changes at https://www.chromatic.com/build?appId=...&number=42

Common causes

Intended UI changes not yet accepted

The visual change is real and expected, but no one has accepted the new baseline in Chromatic.

Nondeterministic rendering creating false diffs

Animations, fonts, or timing differences produce pixel diffs that are not real changes.

How to fix it

Review and accept intended changes

  1. Open the Chromatic build link from the failing check.
  2. Accept the changes that are intended so the baseline updates.
  3. Re-run so the check passes with the new baseline.

Stabilize nondeterministic snapshots

Pause animations and freeze dynamic values so Chromatic does not flag noise as changes.

.storybook/preview.ts
// story parameters
export const parameters = { chromatic: { pauseAnimationAtEnd: true, delay: 300 } };

How to prevent it

  • Accept intended baselines promptly so builds stay green.
  • Pause animations and freeze dynamic content in stories.
  • Keep TurboSnap history so only changed stories are compared.

Related guides

Tired of flaky CI? Latchkey auto-heals failed jobs and retries them for you. Start free →