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.

---

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.

---

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.
• Lastly, I run my the Snapshot tests for my stories with:

$ npm test

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.

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.

Here is my local React Site running on port 3000:

Here is the Snapshot generated from Jest Test Run.

To test this was actually 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 2: Changed the background color of login form from grey to yellow

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 { 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 with Storybook Viewport addon

Test run to generate viewport snapshots