storybook-addon-vis 0.18.2 → 0.18.4

package/dist/vitest-setup.d.ts

@@ -1,22 +1,8 @@
+import * as vitest_plugin_vis_setup from 'vitest-plugin-vis/setup';
 import { SnapshotMeta } from 'vitest-plugin-vis';
 
-declare const vis: {
-    presets: {
-        manual(): void;
-        auto(): void;
-        theme(themes: Record<string, (options: SnapshotMeta<any> & {
-            tags: string[];
-        }) => Promise<boolean> | Promise<void> | boolean | void>): void;
-    };
-    beforeAll: {
-        setup(): Promise<void>;
-    };
-    afterEach: {
-        matchImageSnapshot(): Promise<void>;
-        matchPerTheme(themes: Record<string, (options: SnapshotMeta<any> & {
-            tags: string[];
-        }) => Promise<boolean> | Promise<void> | boolean | void>): () => Promise<void>;
-    };
-};
+declare const vis: vitest_plugin_vis_setup.VisClientConfigurator<SnapshotMeta<any> & {
+    tags: string[];
+}>;
 
 export { vis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-vis",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "Storybook Vitest visual testing addon",
   "keywords": [
     "image-snapshot",
@@ -58,7 +58,7 @@
   ],
   "dependencies": {
     "type-plus": "8.0.0-beta.7",
-    "vitest-plugin-vis": "2.1.0"
+    "vitest-plugin-vis": "2.2.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.4.2",
@@ -72,9 +72,9 @@
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "^3.0.5",
-    "@vitest/coverage-istanbul": "^3.0.5",
-    "@vitest/expect": "^3.0.5",
+    "@vitest/browser": "^3.0.6",
+    "@vitest/coverage-istanbul": "^3.0.6",
+    "@vitest/expect": "^3.0.6",
     "boxen": "^8.0.1",
     "cross-env": "^7.0.3",
     "dedent": "^1.5.1",
@@ -86,7 +86,7 @@
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "vite": "^6.0.9",
-    "vitest": "^3.0.5",
+    "vitest": "^3.0.6",
     "vitest-browser-react": "^0.1.0",
     "webdriverio": "latest",
     "zx": "^8.0.0"

package/readme.md

@@ -8,6 +8,7 @@
 [`storybook-addon-vis`][storybook-addon-vis] captures and compares image snapshot automatically and manually.
 
 This addon is inspired by [`jest-image-snapshot`][jest-image-snapshot].
+Internally, it uses [`vitest-plugin-vis`][vitest-plugin-vis] to do the heavy lifting.
 
 Starting from [Storybook] 8.3,
 Storybook introduces [Storybook Test addon][storybook-test-addon].
@@ -43,7 +44,7 @@ thus you need to add it to both [Storybook] and [Vitest].
 
 For [Vitest], you need to:
 
-- Add the `storybookVis` plugin in your `vitest.config.ts`.
+- Add the `storybookVis` plugin in `vitest.config.ts`.
 - Add project annotations and setup Vitest life cycle in `vitest.setup.ts`.
 
 #### Edit Vitest Config
@@ -60,12 +61,20 @@ export default defineConfig({
 		storybookVis(/* options */)
 	],
 	test: {
+		// vitest v2
 		browser: {
-			// typical browser config
 			enabled: true,
 			provider: 'playwright',
-			name: 'chromium'
+			name: 'chromium',
 		},
+		// vitest v3
+		browser: {
+			enabled: true,
+			provider: 'playwright',
+			instances: [
+				{ browser: 'chromium' }
+			]
+		}
 		// recommend to set to false
 		globals: false,
 		// Needed by both Storybook Test Addon and Storybook Visual Testing
@@ -105,7 +114,7 @@ export default defineConfig({
 			}) => `__vis__/${ci ? platform : 'local'}`,
 			platform: '...', // {process.platform} or `local` (deprecated use `snapshotRootDir` instead)
 			customizeSnapshotSubpath: (subpath) => trimCommonFolder(subpath),
-			customizeSnapshotId: (id, index) => `${id}-${index}`,
+			customizeSnapshotId: ({ id, index }) => `${id}-${index}`,
 			// set a default subject (e.g. 'subject') to capture image snapshot
 			subjectDataTestId: undefined,
 			comparisonMethod: 'pixel',
@@ -119,7 +128,7 @@ export default defineConfig({
 })
 ```
 
-`storybookVis()` does not provide the `auto` or `manual` presets because you will need to [provide your `vitest.setup.ts`][storybook-test-addon#example-config] to make the story configuration available to Vitest anyway.
+`storybookVis()` does not provide the `auto`, `enable`, or `manual` presets because you will need to [provide your `vitest.setup.ts`][storybook-test-addon#example-config] to make the story configuration available to Vitest anyway.
 So it is better to do the setup in one place.
 
 ##### Snapshot folder
@@ -151,7 +160,16 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
 	plugins: [
 		storybookVis({
-			snapshotRootDir: 'path/to/snapshot'
+			snapshotRootDir: 'path/to/snapshot',
+			// or if you need super power
+			snapshotRootDir: ({
+				ci, // true if running on CI
+				platform, // process.platform
+				providerName, // 'playwright' or 'webdriverio'
+				browserName,
+				screenshotFailures, // from `browser` config
+				screenshotDirectory, // from `browser` config
+			}) => string,
 		})
 	],
 	// ...
@@ -267,14 +285,23 @@ const project = setProjectAnnotations([
 	projectAnnotations
 ])
 
-// setup visual testing but no post-test image snapshot
+// setup visual testing but no post-test image snapshot support
 vis.presets.manual()
 
+// setup visual testing with post-test image snapshot support.
+// use `setAutoSnapshotOptions()` in your test to enable it.
+vis.presets.enable()
+
 // capture image snapshot at the end of each test and story with `snapshot` tag
+// Note: starting in 1.0.0, the `snapshot` tag will be automatically added.
 vis.presets.auto()
 
 // capture image snapshot at the end of each test and story with `snapshot` tag
-// for multiple themes (light and dark in this example)
+// for multiple themes (light and dark in this example).
+//
+// Note that this changes the theme in the `afterEach` hook.
+// If you want to capture manual snapshots in different themes,
+// configure Vitest to run the tests in different themes.
 vis.presets.theme({
 	async light() { document.body.classList.remove('dark') },
 	async dark() { document.body.classList.add('dark') },
@@ -344,7 +371,7 @@ To address this, you can add the following to your `tsconfig.json`:
 
 ## Usage - automatic snapshot
 
-With the `auto` preset, [`storybook-addon-vis`][storybook-addon-vis] automatically captures image snapshot for stories with `snapshot` tag.
+With the `auto` or `enable` preset, [`storybook-addon-vis`][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.
 
@@ -399,8 +426,8 @@ export const MyStory = {
 
 // in vitest.setup.ts
 vis.presets.theme({
-	light(options) {
-		if (options.tags.includes('!light')) return false
+	async light({ tags }) {
+		if (tags.includes('!light')) return false
 		document.body.classList.remove('dark')
 	}
 })
@@ -495,8 +522,8 @@ With the default snapshot folder structure, you should add the following to your
 
 ```ini
 # .gitignore
-**/__vis__/__diffs__
-**/__vis__/__results__
+**/__vis__/**/__diffs__
+**/__vis__/**/__results__
 **/__vis__/local
 ```
 
@@ -522,6 +549,23 @@ or hoist the `pathe` package:
 hoist-pattern[] = pathe
 ```
 
+> It takes empty snapshots on Vitest tests
+
+If you are using Storybook 8.5 and using the workaround to run both stories and tests [as described here](https://github.com/storybookjs/storybook/issues/30307),
+Storybook are also transforming the tests as if they are stories.
+That causes it to inject elements into the DOM and this addon detect that as some rendering by your tests,
+thus taking an image snapshot.
+
+Since it is a bug to be addressed soon,
+please disable the snapshots for your tests by adding a `beforeAll` hook:
+
+```ts
+import { setAutoSnapshotOptions } from 'storybook-addon-vis'
+import { beforeAll } from 'vitest'
+
+beforeAll(() => setAutoSnapshotOptions(false))
+```
+
 [@storybook/experimental-addon-test]: https://www.npmjs.com/package/@storybook/experimental-addon-test
 [downloads_image]: https://img.shields.io/npm/dm/storybook-addon-vis.svg?style=flat
 [github_action_url]: https://github.com/repobuddy/storybook-addon-vis/actions