chromatic/storybook-addon.d.ts

Visual Testing for Storybook

// Use interface augmentation to add chromatic parameter to addParameter() types.
declare module '@storybook/addons/dist/types' {
  interface Parameters {
    chromatic?: ChromaticParameters;
  }
}

export interface ChromaticParameters {
  /**
   * To set a viewport, specify one or more screen widths to the `chromatic.viewports` parameter.
   */
  viewports?: number[];

  /**
   * You can omit stories entirely from Chromatic testing using the disable story parameter.
   */
  disable?: boolean;

  /**
   * Chromatic will pause CSS animations and reset them to their beginning state.
   *
   * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
   * animation at the end, use the `pauseAnimationAtEnd` story parameter.
   */
  pauseAnimationAtEnd?: boolean;

  /**
   * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
   * screenshot.
   */
  delay?: number;

  /**
   * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
   * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
   * visual noise generated by non-deterministic rendering such as anti-aliasing.
   *
   * 0 is the most accurate. 1 is the least accurate.
   *
   * @default 0.063
   */
  diffThreshold?: number;
}