Skip to main content

Visual Testing

Testing visual components is done via 2 methods:

  • Snapshot testing - compares the rendered HTML code for a component to some reference component HTML.
  • Visual regression testing - compares a screenshot of the component to some reference screenshot

Visual regression testing alone is sufficient for our project. Using Chromatic with stories we are able to flag code changes which produce undesired visual effects before releasing to production.

Currently we have a 80k snapshot limit per month for visual regression testing.

UI Review​

Used by UX to review our storybook components.

UI Tests​

Used by devs to update the component snapshots in our unified chromatic snapshot library.

TurboSnap​

This feature enables Chromatic to only snap images for the affected stories.

You can check if snapshots are correctly being skipped via the Turbosnap status on the UI Test page for a PR.

Turbosnap