Visual Regression Testing in React with Storybook & Chromatic (CI-Ready)
In this video, we set up visual regression testing for a React application using Storybook and Chromatic.
Repository: https://github.com/igo0r/demo-react
You’ll learn how to:
Create isolated UI components with Storybook
Capture UI snapshots automatically
-Detect visual changes on every pull request
Review visual diffs directly in Chromatic
Integrate visual testing into a modern CI workflow
This approach helps catch UI bugs that unit and integration tests cannot detect, making it a perfect addition to your frontend testing strategy.
Steps:
npm create vite@latest react-storybook-chromatic -- --template react-ts
cd react-storybook-chromatic
npm install
npx storybook@latest init
npm install -D chromatic
npx chromatic --project-token=YOUR_TOKEN
⏱️ Chapters:
00:00 – Intro
01:50 – Install required tools
03:09 – Create react component
04:57 – Storybook configuration
07:57 – Chromatic configuration
09:15 – Git repository creation
10:50 – Publish chromatic snapshots
11:38 – Chromatic CI workflow
13:40 – Add chromatic secret token
14:46 – Pull request changes
17:30 – Fix workflow error
19:20 – review chromatic results
21:40 – Conclusions