Skip to content
visual-testingvisual-testingvisual-testing

Migrating to 1.0

storybook-addon-vis 1.0 has made some major improvements over the previous version. Along with the new features, there are some breaking changes.

🗒️ storybook-addon-vis 1.0 supports Storybook 8. For Storybook 9, please use 2.x.

⚠️ Snapshot folder structure customization has changed.

In previous version, you can customize the snapshot folder structure with the snapshotRootDir, customizeSnapshotSubpath, and customizeSnapshotId options to the storybookVis function.

In 1.0, the options are changed to snapshotRootDir, snapshotSubpath, and snapshotKey.

The biggest change is that the snapshotKey now only allows you to specify a string that is used at the end of the snapshot file name. See vitest-plugin-vis for more details.

⚠️ storybook-addon-vis/preview is moved to storybook-addon-vis/vitest-setup.

In previous version, you import the visAnnotations from storybook-addon-vis/preview and add it to your vitest.setup.ts, and use the vis object from storybook-addon-vis/vitest-setup to add the preset:

import * as visAnnotations from 'storybook-addon-vis/preview'
import { vis } from 'storybook-addon-vis/vitest-setup'


const project = setProjectAnnotations([
  visAnnotations, // add this
  projectAnnotations
])


vis.presets.enable()

In 1.0, they are combined:

import { vis, visAnnotations } from 'storybook-addon-vis/vitest-setup'


const project = setProjectAnnotations([
  visAnnotations, // add this
  projectAnnotations
])


vis.setup()