Visual Testing

Visual regression testing

Visual testing tools like Percy or Chromatic integrate with Storybook to automatically capture component screenshots and alert you to unexpected visual changes.

Chromatic for Storybook

Chromatic is the official cloud service for Storybook visual testing. It runs visual tests, tracks changes, and provides a review dashboard for every build.

Setting up Chromatic

Connect your Storybook to Chromatic with a simple authentication.

# Install Chromatic CLI
npm install --save-dev chromatic

# Run visual tests
npx chromatic --project-token=YOUR_TOKEN

Percy integration

Percy is another visual testing tool that integrates with Storybook. It captures full-page screenshots and highlights visual differences.