Chromatic snapshot and timer function (setInterval / setTimeout)

[Yimiprod]

Summary

Hi, at my company we're using chromatic to make non regression visual testing but we are confronted with a problematic we don't know how to fix it.

We have certain components that use setInterval() to make an animation or do an update (like some automatic slider).
But thoses components have, some time to time, a diff detected by Chromatic if the snapshot is made after the said interval has changed between to snapshots.

We don't want to pollute our components with an environment detection based solely on storybook / chromatic, and neither want to use skip selector on them since we want to have them part of the non visual regression lot.

We have same problematics on components using a setTimeout().

So my question is:
Is there a way to put a pause on those two timer in the context of a chromatic snapshot only, or maybe a way to mock those only in this context?

Thanks.

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @Yimiprod! I'm Dosu and I’m helping the storybook team.

There isn’t a built-in Storybook or Chromatic feature to globally pause or mock setInterval/setTimeout just for Chromatic snapshots. However, you can use environment detection in your Storybook config to override these timer functions only during Chromatic runs, without touching your component code.

Storybook provides an isChromatic utility that detects when your stories are running in Chromatic by checking the user agent or URL parameters. You can use this in your .storybook/preview.js (or .ts) to override setInterval and setTimeout globally during Chromatic runs. For example:

// .storybook/preview.js
import { isChromatic } from './isChromatic';

if (isChromatic()) {
  // Pause all intervals and timeouts during Chromatic snapshotting
  window.setInterval = () => 0;
  window.setTimeout = () => 0;
  window.clearInterval = () => {};
  window.clearTimeout = () => {};
}

This will effectively freeze any JS-based timers while Chromatic is taking snapshots, making your visual tests deterministic and avoiding unwanted diffs. You can adjust the stubs if you want to allow some timers to run or log their usage for debugging.

Keep in mind: this approach will affect all stories during Chromatic runs, so if you have stories that rely on timers for their initial render, you may need to fine-tune the logic or use a more targeted override.

Other approaches like disabling CSS animations or using Chromatic parameters (e.g., chromatic: { disableAnimations: true }) don’t affect JS timers, so they won’t solve this issue for setInterval/setTimeout-based animations.

Test this in your Chromatic environment to confirm it works as expected. If you need more granular control, you can wrap the override in a decorator or only apply it to specific stories.

Reference: isChromatic utility implementation | Usage in preview config

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[dosubot[bot]]

You're right—globally overriding setInterval/setTimeout will interfere with Chromatic's own internal timers and can cause it to crash.

A safer approach is to conditionally disable timers inside your story or component code during Chromatic runs. For example, in Storybook's own stories, components check isChromatic() before starting a timer, so the timer is skipped only when running in Chromatic, without affecting global timer functions or Chromatic itself. See this pattern in Layout.stories.tsx.

If you want to avoid adding environment checks directly to your components, you can wrap timer logic in a custom hook or utility that handles the isChromatic check, or use a per-story decorator to apply this logic only where needed.

Let me know if you want a concrete example for your framework or help with a reusable pattern.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Yimiprod]

i don't want my components to know in which environment it is run, show an example for a per-story decorator.

[dosubot[bot]]

You can use a per-story decorator to temporarily mock or disable setInterval/setTimeout just for a specific story, without touching your component code. Here’s how you can do it in React (adapt for other frameworks as needed):

// In your story file (e.g., MyComponent.stories.jsx)
import React, { useEffect } from 'react';

const mockTimersDecorator = (Story) => {
  useEffect(() => {
    // Save originals
    const originalSetInterval = window.setInterval;
    const originalSetTimeout = window.setTimeout;
    const originalClearInterval = window.clearInterval;
    const originalClearTimeout = window.clearTimeout;

    // Mock implementations (no-ops)
    window.setInterval = () => 0;
    window.setTimeout = () => 0;
    window.clearInterval = () => {};
    window.clearTimeout = () => {};

    // Cleanup: restore originals after story unmounts
    return () => {
      window.setInterval = originalSetInterval;
      window.setTimeout = originalSetTimeout;
      window.clearInterval = originalClearInterval;
      window.clearTimeout = originalClearTimeout;
    };
  }, []);

  return <Story />;
};

// Apply to a single story
export const MyDeterministicStory = {
  decorators: [mockTimersDecorator],
  // ...other story config
};

This approach ensures only the selected story has timers mocked, and everything is restored afterward. It avoids global overrides that could break Chromatic or Storybook internals. You can see more about per-story decorators and their usage in the official Storybook docs.

If you use another framework, the pattern is similar: wrap the story, override timers in setup, and restore them in cleanup.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[Yimiprod]

Still making Chromatic throw error, chromatic usin setInterval behind the scene to handle some waiting time, here's a possible solution:

Warning

if the component use an interval less than 1 second, it will not use the mocked version

import type { Decorator } from '@storybook/react-webpack5';
import isChromatic from 'chromatic';
import { useEffect } from 'react';

type SetInterval = typeof globalThis.setInterval;
type IntervalParams = Parameters<SetInterval>;

export const ChromaticIntervalDecorator: Decorator = (Story) => {
  useEffect(() => {
    if (isChromatic()) {
      // Save originals
      const originalSetInterval = globalThis.setInterval.bind(globalThis);
      let t: NodeJS.Timeout;

      // Mock implementations (no-ops)
      globalThis.setInterval = ((
        cb: IntervalParams[0],
        n: IntervalParams[1],
        ...args: Omit<IntervalParams, 0 | 1>
      ) => {
        if (!n || n < 1000) {
          return originalSetInterval(cb, n, ...args);
        }

        t = setTimeout(cb);

        return 0;
      }) as unknown as SetInterval;

      // Cleanup: restore originals after story unmounts
      return () => {
        clearTimeout(t);
        globalThis.setInterval = originalSetInterval;
      };
    }
  }, []);

  return <Story />;
};