The init command will add a loki section to your package.json, but you can edit it to your wishes. NOTE: Any command line argument that loki test accepts can also be added to the loki config object.

Example package.json:

  "name": "my-project",
  "version": "1.0.0",
  "loki": {
    "chromeSelector": "#my-decorator > *",
    "configurations": {
      "chrome.laptop": {
        "target": "",
        "width": 1366,
        "height": 768
      "chrome.iphone7": {
        "target": "",
        "preset": "iPhone 7"
      "ios": {
        "target": "ios.simulator"
      "android": {
        "target": "android.emulator"


This setting is a CSS selector to the part of the page you want screenshots of. This is useful if you have decorators that's not really part of the component itself. Note that it doesn't screenshot the DOM element itself but rather the crops the screenshot to those dimensions, so if you have any elements absolutely positioned above they will be included.


There are two currently available options to choose from when comparing images in loki:


Uses the GraphicsMagick library to create diffs, this is generally faster but requires to have the library installed. You can install it with homebrew using brew install graphicsmagick. This is default if available. chromeTolerance percentage is based on overall image, meaning you'd likely want a low threshold.


A JavaScript only solution that will work out of the box on every machine, however it is slower and will produce a different diff image. chromeTolerance percentage is based on neighboring pixels which makes it ideal when you have different pixel densities.

gm looks-same
Dependency GraphicsMagick None
Speed 🏃Fast 🚶Slower


Plain text output, useful for CI.

skipStories DEPRECATED

This setting is a regular expression matched against the concatenated kind and story name (${kind} ${story}), case insensitive. It's useful if some story breaks the tests or contains animations as an alternative to comment it out.

This setting is deprecated, use storiesOf().add.skip() instead on the stories you want to skip.


Opposite to skipStories.


Name Type Description Targets
target string Target platform, possible values are, chrome.docker, ios.simulator, android.emulator. All
skipStories string DEPRECATED Same as loki.skipStories, but applied to only this configuration. All
storiesFilter string Same as loki.storiesFilter, but applied to only this configuration. All
chromeSelector string Same as loki.chromeSelector, but applied to only this configuration. chrome.*
preset string Predefined bundled configuration, possible values are Retina Macbook Pro 15, iPhone 7, iPhone 5, Google Pixel, A4 Paper, and US Letter Paper. chrome.*
userAgent string Custom user agent. chrome.*
width integer Browser viewport width. chrome.*
height integer Browser viewport height. chrome.*
deviceScaleFactor integer Browser pixel density multiple, use 2 for retina, not supported in docker.
mobile boolean Whether to emulate mobile device. This includes viewport meta tag, overlay scrollbars, text autosizing and more. chrome.*
media string Emulates the given media for CSS media queries. None
fitWindow boolean Whether a view that exceeds the available browser window area should be scaled down to fit. chrome.*

results matching ""

    No results matching ""