How to use @storybook/addon-storyshots-puppeteer - 4 common examples

// Image snapshots
// We do screenshots against the static build of the storybook.
// For this test to be meaningful, you must build the static version of the storybook *before* running this test suite.
const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static');

if (!fs.existsSync(pathToStorybookStatic)) {
  logger.error(
    'You are running image snapshots without having the static build of storybook. Please run "yarn run build-storybook" before running tests.'
  );
} else {
  initStoryshots({
    suite: 'Image snapshots',
    storyKindRegex: /^Addons\|Storyshots/,
    framework: 'react',
    configPath: path.join(__dirname, '..'),
    test: imageSnapshot({
      storybookUrl: `file://${pathToStorybookStatic}`,
      getMatchOptions: () => ({
        failureThreshold: 0.02, // 2% threshold,
        failureThresholdType: 'percent',
      }),
    }),
  });
}

import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';

registerRequireContextHook();
initStoryshots({
  suite: 'Storyshots',
  test: imageSnapshot({
    storybookUrl: 'http://localhost:9001',
  }),
});

* This test needs the static build of the storybook to run.
 * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
 * */
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { axeTest } from '@storybook/addon-storyshots-puppeteer';
import getStorybookUrl from './getStorybookUrl';

const storybookUrl = getStorybookUrl();
if (storybookUrl != null) {
  initStoryshots({
    suite: 'Puppeteer tests',
    storyKindRegex: /^Basics|UI/,
    framework: 'react',
    configPath: path.join(__dirname, '..'),
    test: axeTest({ storybookUrl }),
  });
}

* This test needs the static build of the storybook to run.
 * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
 * */
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
import getStorybookUrl from './getStorybookUrl';

const storybookUrl = getStorybookUrl();
if (storybookUrl != null) {
  initStoryshots({
    suite: 'Puppeteer tests',
    storyKindRegex: /^Addons\/Storyshots/,
    framework: 'react',
    configPath: path.join(__dirname, '..'),
    test: puppeteerTest({ storybookUrl }),
  });
}