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!

--

--

--

I’m front-end developer and really passionate programmer, caring husband and pancake baker on Sundays. School teacher of computer studies in the past.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

🔥 Frontend Interview Cheatsheet That Helped Me Get Offers From Amazon & LinkedIn

Real Time Social Spaces

How to run Vite dev server on network [Network: use ` --host` to expose]

How to Approach Callbacks

Rest Parameters — ES6 features-Part-2

JavaScript: A Brief Review

Reusing JavaScript RegExp Instance Fails Test and Exec When It Shouldn’t

Storybook에서 nextjs 에러가 발생할 때

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ilya Zykin

Ilya Zykin

I’m front-end developer and really passionate programmer, caring husband and pancake baker on Sundays. School teacher of computer studies in the past.

More from Medium

Thomas Rumas’s experience as an attendee at We Love Speed

Improve your Storybook workflows with Chromatic

What Made Us Switch to Micro Frontend?

Micro Frontends, Good, Bad or Ugly?