Delay snapshot option configurable on the global/story/component level for React

[d3vl1m3]

Was having issues with flaky tests and couldn't find a solid, flexible way of adding snapshot delays this out the box.

The config steps should work no matter what framework you are using in SB (React, Angular, etc)

But steps 2 and 3 will need to be modified to you work with how your framework handles the equivalent of React hooks.

I'd like to build it in to a Loki/SB plugin moving forward but for now:

1. Update preview JS with the new property that can be used:

// .storybook/preview.js
export const parameters = {
  //...
  // add this to the top level of the parameters export in `preview.js` so your
  // story can use/update it
  loki: {
    // will not trigger timeout logic if set to any falsey value.
    delayCapture: 0,
}

2. Add a custom hook that will trigger a delay using createAsyncCallback:

// utils/loki/use-loki-capture-delay.hook.js
import {useEffect} from 'react';
import isLokiRunning from '@loki/is-loki-running';
import createAsyncCallback from "@loki/create-async-callback";

const useLokiCaptureDelay = (delayInMs = 0) => {
  useEffect(() => {
    if ( isLokiRunning() && delayInMs ) {
      const onDone = createAsyncCallback();
      // Here! This is where the delay is set and Loki wil not fire until onDone 
      // is called, after the delay time has passed by.
      const timer = setTimeout(() => onDone(), delayInMs);
      return () => clearTimeout(timer);
    }
  }, [delayInMs]);
}
export default useLokiCaptureDelay;

3. Set a global decorator in preview.js that will load in when Loki runs to set a global delay of 0ms:

// .storybook/preview.js
//...
const storyDecorators = [];

if ( isLokiRunning() ) {
  storyDecorators.push(
    (Story, options) => {
      const { loki } = options.parameters;
      useLokiCaptureDelay(loki.delayCapture);
      return <Story />
    }
  );
}

export const decorators = storyDecorators;
//...

4. Set a custom delay time in a story that requires it with the new loki.delayCapture parameter:

// example.stories.jsx
//...
export default {
  title: 'Example/FooBar',
  parameters: {
    loki: {
      // Here! This is all you need moving forward to set the delays.
      delayCapture: 2000
    }
  }
};
//...

[luuhoangbac]

Thank you, it works perfectly fine for me