• Stars
    star
    1,778
  • Rank 26,181 (Top 0.6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 28 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ‘ Visual Regression Testing for Storybook

Loki

Visual Regression Testing for Storybook

GitHub license Tests npm version npm downloads

Loki

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)
  • Chrome in AWS Lambda
  • Local Chrome application
  • iOS simulator
  • Android emulator

Prerequisites

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.

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

Documentation

Examples

Development

# Install dependencies
yarn
# Start example storybook
yarn workspace @loki/example-react run storybook
# Run example visual tests
yarn workspace @loki/example-react run test
# Run unit tests
yarn test
# Run cli integration tests
cd test/cli && yarn test

Maintainers


Joel Arvidsson

Author

Tomas Echeverri Valencia

Maintainer

License

MIT License. Β© Joel Arvidsson 2017-present

More Repositories

1

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
JavaScript
17,427
star
2

react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
JavaScript
9,838
star
3

react-native-progress

Progress indicators and spinners for React Native
JavaScript
3,628
star
4

hush

🀫 Noiseless Browsing – Content Blocker for Safari
JavaScript
3,264
star
5

react-native-keychain

πŸ”‘ Keychain Access for React Native
Kotlin
3,194
star
6

react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native
JavaScript
2,818
star
7

react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
JavaScript
2,450
star
8

react-native-image-progress

Progress indicator for networked images in React Native
JavaScript
1,723
star
9

angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js
JavaScript
1,482
star
10

react-native-performance

πŸ“ Monitor and measure React Native performance
TypeScript
929
star
11

react-native-store-review

Rate on App/Play Store directly in your React Native app
Java
751
star
12

react-native-shimmer

Simple shimmering effect for any view in React Native
Java
700
star
13

react-native-esbuild

Fast bundler and dev server for react-native using esbuild
JavaScript
595
star
14

react-native-parallax

Parallax effects for React Native using Animated API
JavaScript
585
star
15

react-native-vector-image

iOS/Android native vector assets generated from SVG
JavaScript
310
star
16

react-native-pinchable

Instagram like pinch to zoom for React Native
Java
225
star
17

angular-parallax

Lightweight & performant parallax scrolling for angular.js.
JavaScript
203
star
18

angular-lazytube

Lightweight, responsive, lazy loaded YouTube videos that degrades gracefully.
JavaScript
45
star
19

diglett

Keep your JS project lean by detecting duplicate dependencies
JavaScript
44
star
20

esbuild-server

Fast, lightweight and powerful development server for esbuild
TypeScript
38
star
21

react-native-oxc

10x your react-native builds with OXC
TypeScript
28
star
22

oblador.github.io

Landing page for my GitHub projects
HTML
10
star
23

oblador

5
star
24

node-cloud-imager

Powerful yet simple way to apply filters/crop/resize images and upload to cloud providers (Amazon S3, Rackspace, Azure).
JavaScript
3
star
25

node-ups-sdk

JavaScript
3
star
26

sovra

🀏 Rust-based Test Decider for JavaScript using Oxc
Rust
2
star
27

expo-requestidlecallback-issue

TypeScript
1
star
28

react-native-android-autolinking-bug-repro

TypeScript
1
star
29

.github

1
star
30

react-native-fabric-image-unicode-issue

TypeScript
1
star