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

Build a Node.js Server With Fastify and TypeScript

5 Simple Ways to Boost Your React Web App Performance

Cleaner React Enzyme Tests

A crumbling tower stands on the Cornish coastline

How to install NGINX + PHP7.1 + PHP-FPM in Amazon AMI EC2 for LARAVEL 5.x

React: stop panicking and think!

How To Seed with Faker

Deep learning in your browser: A brisk guide

React: Rendering using Concurrent Mode and Suspense

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

How to Optimize CircleCI config

How to create dynamic E2E testing environments

Frontend tests structure

Writing tests after release is a mistake