StoryBook/React. Visual testing Integration with percy.io

Here I’m going to tell how I did integration with percy.io

I just had setup StoryBook for my new React application.

Now I should figure out how to use Persy.io over StoryBook to provide visual testing.

First of all I need to create a new project on Persy.io

Now it gives to me to select a required integration manual.

It leads you to https://docs.percy.io/docs/storybook

It’s time to install integration package.

yarn add @percy/storybook

And add a command to run specs.

"storybook:build": "build-storybook -c .storybook/local",
"visual:check": "yarn storybook:build && percy-storybook --widths=1280"

I’m running

PERCY_TOKEN=SecretToken yarn visual:check

That is it!

Looks like it’s not so difficult.

Now every time when I run visual check it builds storybook, sends to percy.io and I’ll need to check screenshots and approve them.

Have a happy development!