Storyshots a powerful side of Storybook to Visual Test React Components

At a consumer-oriented business like Shaadi.com, we like to maintain discipline around our React components, the way they look, feel and behave in the real world for our customers. The benefits of writing functional tests with 90–100% code coverage have now become obvious to us.

Our components are now easily composable, can be easily refactored and even replaced by newer components and our tests tell us if we are breaking any UI.

But I felt functional tests were still not answering an important question for my product and my team:

Does my website make sense for the customer right now?

What happens is that our product team adds a lot of A/B cases to our component feature set and it’s hard at any given time to ensure the end product has the final design integrity it needs under all conditions and under varying prop states.

Turns out this kind of problem takes its own type of testing and it’s called Visual regression testing.

Visual regression testing tool performs user-interface(UI) regression testing by capturing the screenshots of web pages/UI and compare them with the original images. If you have used Jest snapshots before, this should ring a bell.

So, I started looking for tools which would enable this kind of testing in React applications and quickly I stumbled upon React Storyshots. The tool seemed the most obvious choice to me because we already have Storybook in-place for React components.

A brief note for readers on StoryBook vs StoryShots :

Storybook is basically a playground for developing your React components and their behaviour. It also serves as documentation for your component library. You can showcase your components and their different alterations that are linked to props. To know more on Storybook visit this link.

StoryShots is a Storybook addon that performs snapshot testing on the stories and works like any Jest test, running npm run test will also run your snapshot testing for all the StoryBook stories you have and spot the differences for you.

Find the difference

How I integrated StoryShots in my React App?

1. I installed StoryShots using these commands inside a Storybook-enabled repo

npm i -D @storybook/addon-storyshots (helps do snapshot testing)
npm install --save-dev @storybook/addon-storyshots-puppeteer (additional addon to do image snapshot testing)

2. Then, I created a test file storyshots.test.js that contains the following:

import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:9001'})});

So here is what storyshots actually does:

• Launches a Chrome headless using puppeteer
• Browses each story (calling http://localhost:9001/iframe.html?... URL),
• Take screenshots & save all images under __image_snapshots__ folder.

In order to get our image snapshot testing running, we need to start our Storybook instance first with yarn storybook or provide static build Storybook. You can use static build Storybook in CI environment.

3. Lastly, I run my the Snapshot tests for my stories with:

npm test

This will save the initial set of snapshots inside the Storybook config directory.

Below is Jest Test Run , snapshot generated from storybook ,which will be used later in comparison.

Jest Test Run

Here is my local React Site running on port 3000

My React component

Here is my React StoryBook running on port 9001

StoryBook of my React Component

Here is the Snapshot generated from Jest Test Run.

To test the actual working, I changed the button label and padding and ran the test again. The new screenshot was generated highlighting the difference between the original and newly changed code.

Test 1: Changed the button label from Register to Submit

test run output

Differences highlighted in snapshot test

Decision-making step: After confirming the difference, I decided to go with new changes and updated the base image by pressing U on the terminal where test was running.

Test 2: Changed the background color of login form from grey to yellow

Base Image

Test run after making the change

Differences highlighted by snapshot test

I was really excited to see all this working, Storyshots was creating snapshots of my stories.

My excitement led me to dig in more with the specs and play around with a few more add-ons for Storybook. I even started exploring Storybook Viewport, an addon that takes the visual testing one step further and test the appearance of my component on different device sizes.

Bonus: Storybook Viewport

1. First I installed the add-on

npm install @storybook/addon-viewport --save-dev

2. Then, I added this import to .storybook/addons.js

import '@storybook/addon-viewport/register';

3. Then, Import and use the configureViewport function in your config.js file.

import { configureViewport } from '@storybook/addon-viewport';

4. Lastly, I imported the addon in my story.

import { Viewport } from '@storybook/addon-viewport';

To test the viewport addon, I added below mentioned media query on the container Div.

s.Container = styled.div`
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 30px;
    align-content: center;
    @media (min-width: 320px) and (max-width: 767px) {
    background: red;
    }    
    @media (min-width: 768px) and (max-width: 1024px){
    background: green;
    } 
`;

Here is my React component after adding media query

Component on Storybook Viewport addon

Test run to generate viewport snapshots

And that’s the story of how we ended up transforming our stories into tests.

Happy Testing