Boost up your confidence while merging a (front-end) PR

Photo by Clark Young on Unsplash

In each (this time front-end) project, it is essential to be sure, that each feature we ship doesn’t break up any other parts of the app.

Ever heard of Storybook? Chances are you did if you are a front-end developer that doesn’t live under a stone. It’s not only a great tool to develop with but it can also watch for regression with community-driven addons.

I have recently come up across Loki; it was right in the middle of reviewing a PR that was introducing a huge set of CSS changes to the project. I got myself a cup of coffee, sat down in the chill room and I was ready to go over through a hundred files… But fortunately for me, the client, and the project itself, I found the solution with a visual regression testing tool designed for Storybook.

It fits exactly the product we develop as it’s entirely covered with Storybook’s stories.

Before I finished that cup of coffee I knew exactly what has changed (in a bad way) without staring and comparing the results with the Figma file.

What is Loki?

Loki makes it easy to test your Storybook project for visual regressions.

How does it work?

Loki goes over your project files tree and picks up “.stories” files. Then it spins up a headless Chrome browser (if you choose to run it locally) and takes up screengrabs that are being saved in a “current” directory. By comparing each current image against the one that is being versioned via GIT (“reference” directory) it generates a “difference” directory that contains only images that differ.

Example of a “difference” image of a story.

Supported platforms:
- Chrome in Docker
- Chrome in AWS Lambda
- Local Chrome application
- iOS simulator
- Android emulator

How to set it up to boost up your confidence?

I strongly recommend either running it locally before submitting a PR (easiest) or setup a GitHub Action to run these tests on each PR (Docker/AWS Lambda) if you work in a bigger team.

I'm using it in a mix with DOM storyshots based tests that run on each GIT push 🚀 and I must admit, it did save me a tremendous amount of dev-hours this year.