Screenshot Testing Storybook for React Native with Applitools

Gytis Vinclovas
Jan 15 · 2 min read

For the past few years I’ve been working on an app created with React Native. To make our development life easier, we use Storybook to create and maintain components. To make sure that we catch any bugs that appear we want to thoroughly test Storybook stories. One of the way we do that is with screenshot testing. It allows us to catch any accidental design issues, and for us screenshot comparison is easier to do than comparing snapshots.

In search for the solution

I’ve tried multiple tools for screenshot testing (Loki, custom local screenshot testing solution). It worked, but it didn’t meet our needs. We had compatibility issues between CI and local machine and having reference images in git was difficult to handle. That is where Applitools came to our help. It has a smart screenshot comparison, where it only detects differences that are visible to the human eye, so any issues that appear due to infrastructure differences (different machines can render shadows/animations differently by few pixels) are ignored. Moreover, Applitools is a standalone tool and has a great UI to help with our workflow.

RNSST

To automate Storybook stories screenshot testing I’ve created a tool called rnsst. It automatically generates screenshot tests for all your stories. The prerequisites for it are Detox (which you should try out for your app E2E testing) and Applitools. If you are currently not using Detox it is not difficult to setup.

Comparing screenshots in Applitools

Setup

Setting up rnsst itself is easy. Please check the rnnst readme for the steps.

How does it work

  1. We start Detox tests.
  2. We start custom rnnst Storybook server which waits for the story list.
  3. Detox opens Storybook UI.
  4. Storybook UI tries to connect to Storybook server with websockets.
  5. Storybook UI sends story list to Storybook server.
  6. rnsst iterates through the stories: creates a test, opens the story in Storybook UI by emitting websocket event, takes and compares the screenshot.

Alternatives

This is not the first library that allows to do screenshot testing for React Native Storybook. As an alternative you can try Loki created by Joel Arvidsson. Loki allows you to do local screenshot testing, which has its own benefits and drawbacks.

Rnsst itself is a small library, which uses detox applitools testing library for screenshot testing itself. So the project could be adapted to use other tools than Applitools.

Contact

If you have any questions or feedback feel free to contact me through email (gytis.vinclovas@gmail.com) or on twitter @GytisVinclovas.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade