Visual Regression Testing for Storybook

Rationale

There are a few visual regression tools for the web, but most either cannot be run headless or use phantomjs which is deprecated and a browser nobody is actually using. They usually also require you to maintain fixtures. With react-native it's now possible to target multiple platforms with a single code base, but there's no single tool to test all to my knowledge.

Loki aims to have easy setup, no to low maintenance cost, reproducible tests independent of which OS they are run on, runnable on CI and support all platforms storybook does.

Supported platforms

Chrome in docker (recommended)
Local Chrome application
iOS simulator
Android emulator

Prerequsites

Node 7.6 or higher

Optional dependencies

GraphicsMagick for gm diffing engine, brew install graphicsmagick
Docker for the chrome.docker target.
Chrome 59+ for the chrome.app target, brew cask install google-chrome-canary.

Installation

yarn add loki --dev
yarn loki init

Workflow

Loki will not start any servers for you, so ensure storybook and any simulator/emulator is up and running before running tests.

Start storybook server yarn storybook
Add first set of reference files yarn loki update
Do some changes to your components
Test against references yarn loki test
Review changes in diff folder
Approve changes and update references yarn loki approve

olofd/nari