Ignore stories and elements

Sometimes a component’s UI changes every render or contains content like video/animation that is impossible to test consistently. This triggers visual changes every time you test even though nothing in the component code has changed.

It’s easy to tell Chromatic to ignore stories or DOM elements when looking for changes.

Ignore elements

Ignore stories

You can omit stories from Chromatic testing like so:

const chapter = storiesOf("foo", chapter);

if (!navigator.userAgent.match(/Chromatic/)) {
  // add offending story

Ignore DOM elements

Add the .chromatic-ignore CSS class to elements in your component you want Chromatic to ignore.

import React from 'react';

export default function MyComponent() {
  return (
      <p>This date will always change so ignore it: <span className="chromatic-ignore">{new Date()}</span></p>
        Also ignore the animated gif:
        <img className="chromatic-ignore" src="https://media0.giphy.com/media/3oriO4WnYwNTZLKv5K/giphy.gif" />

Accept the baseline with ignored regions

Once you’ve ignored a DOM element in code, make sure to accept the new snapshot that includes the ignored element. This sets the baseline and ensures that the ignored region will apply to subsequent builds.

How does it work?

Chromatic uses the rendered visual output at the pixel level to determine whether components’ have changed. Setting the .chromatic-ignore class instructs the diffing algorithm to ignore the pixels within the bounding rectangle of ignored elements. It’s important to ensure the calculated bounding rectangle fully covers the changing content.


Ignore regions not used

When considering ignore regions, Chromatic expects the same exact area to be covered by a given region in both snapshots (the new snapshot and the baseline). This means in particular:

  • The first snapshot taken with an ignore region, and
  • Any time an ignore region moves

Chromatic will disregard that particular region.