Automatic snapshots

With visual testing enabled, storybook-addon-vis automatically captures image snapshot for stories with snapshot tag.

As how tags work in Storybook, you can add the tag globally, per story file, or per story.

export default {
  // Enable image snapshot for all stories
  // For CSF Next, this is added automatically by the addon.
  tags: ['snapshot']
}

export default {
  // Enable image snapshot for all stories in this file
  tags: ['snapshot']
}

export const MyStory = {
  // Enable image snapshot for this story
  tags: ['snapshot'],
  // ...
}

You can disable snapshot with the !snapshot tag, much like !test.

export const MyStory = {
  // Disable image snapshot for this story
  tags: ['!snapshot'],
  // ...
}

Note that since they are captured during test, if you set tags: ['!test'] to disable testing, no snapshot will be taken either.

You can also provide additional tags, which you will receive when you use the theme preset:

export const MyStory = {
  tags: ['snapshot', 'skip-dark'],
  // ...
}

// in vitest.setup.ts
vis.setup({
  auto: {
    async dark({ tags }) {
      if (tags.includes('skip-dark')) return false
      document.body.classList.add('dark')
    }
  }
})

If you want to customize the snapshot options for the automatic snapshot, you can provide options using Storybook parameters. defineAutoSnapshotParam() is a helper function to provide autocompletion:

import { defineAutoSnapshotParam } from 'storybook-addon-vis'

export const MyStory = {
  parameters: defineAutoSnapshotParam({
    failureThreshold: 70,
  })
  // ...
}