Storybook Vitest Visual Testing addon

storybook-addon-vis captures and compares image snapshot automatically and manually.

This addon is inspired by jest-image-snapshot. Internally, it uses vitest-plugin-vis to do the heavy lifting.

Starting from Storybook 8.3, Storybook introduces Storybook Test addon.

It allows you to test your components directly inside Storybook. It does this by using a Vitest plugin to transform your stories into Vitest tests using portable stories.

These stories are then run by Vitest in the browser using Vitest Browser Mode.

Since it is running in an actual browser, jest-image-snapshot does not work as it depends on NodeJS. This add-on provides similar functionality to jest-image-snapshot.

In addition, you can capture image snapshot manually, and controls how the auto image snapshot(s) are taken.

[!NOTE] storybook-addon-vis 3.0.0 supports Storybook 10.

storybook-addon-vis 2.0.0 supports Storybook 9.

For Storybook 8, please use 1.x.

With Storybook 10.3+, @storybook/addon-vitest often applies project annotations for you. If you are not on CSF Next, you may need to remove visAnnotations from setProjectAnnotations([...]) in vitest.setup.ts and register the same hooks from .storybook/preview.ts instead (for example via definePreview({ addons: [addonVis(...)] }) or export default { ...visAnnotations, ... }). See the Overview docs section Storybook 10.3+ and Vitest project annotations.

Install

npm install --save-dev storybook-addon-vis

pnpm add --save-dev storybook-addon-vis

yarn add --save-dev storybook-addon-vis

Please take a look at the documentation on how to configure and use this addon.