vitest-plugin-vis 3.5.1 → 4.0.0

package/dist/to_match_image_snapshot.types-p-zilA_M.d.mts

@@ -0,0 +1,9 @@
+import { m as ToMatchImageSnapshotOptions, n as ComparisonMethod } from "./types-DFb23VE1.mjs";
+
+//#region src/client/expect/to_match_image_snapshot.types.d.ts
+interface ImageSnapshotMatcher {
+  toMatchImageSnapshot<M extends ComparisonMethod>(options?: ToMatchImageSnapshotOptions<M> | undefined): Promise<void>;
+}
+//#endregion
+export { ImageSnapshotMatcher as t };
+//# sourceMappingURL=to_match_image_snapshot.types-p-zilA_M.d.mts.map

package/dist/to_match_image_snapshot.types-p-zilA_M.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to_match_image_snapshot.types-p-zilA_M.d.mts","names":[],"sources":["../src/client/expect/to_match_image_snapshot.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,oBAAA;iCACe,4BAA4B,4BAA4B,iBAAiB;AADzG"}

package/dist/trim_common_folder-ModiubEJ.d.mts

@@ -0,0 +1,9 @@
+//#region src/shared/trim_common_folder.d.ts
+/**
+ * Trim off common folder such as `src` or `tests` from the test file path.
+ * This is used to generate the default snapshot sub-path.
+ */
+declare function trimCommonFolder(suiteName: string): string;
+//#endregion
+export { trimCommonFolder as t };
+//# sourceMappingURL=trim_common_folder-ModiubEJ.d.mts.map

package/dist/trim_common_folder-ModiubEJ.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trim_common_folder-ModiubEJ.d.mts","names":[],"sources":["../src/shared/trim_common_folder.ts"],"sourcesContent":[],"mappings":";;AAIA;;;iBAAgB,gBAAA"}

package/dist/types-DFb23VE1.d.mts

@@ -0,0 +1,110 @@
+import pixelMatch from "pixelmatch";
+import { Options as SsimDiffOptions } from "ssim.js";
+
+//#region src/client/snapshot_meta.d.ts
+type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> & ImageSnapshotSubjectOptions & {
+  /**
+   * Whether to enable the snapshot.
+   *
+   * Default: `true`
+   */
+  enable?: boolean | undefined;
+  [key: string]: unknown;
+};
+//#endregion
+//#region src/shared/constants.d.ts
+declare const NAME = "vis";
+declare const SNAPSHOT_ROOT_DIR = "__vis__";
+declare const BASELINE_DIR = "__baselines__";
+declare const RESULT_DIR = "__results__";
+declare const DIFF_DIR = "__diffs__";
+//#endregion
+//#region src/shared/types.d.ts
+type Awaitable<T> = T | PromiseLike<T>;
+interface ImageSnapshotTimeoutOptions {
+  /**
+   * Timeout for taking the snapshot.
+   *
+   * Default: 30000 ms (30 seconds)
+   */
+  timeout?: number | undefined;
+}
+interface ImageSnapshotKeyOptions {
+  /**
+   * Customize the `snapshotKey` of the snapshot.
+   */
+  snapshotKey?: string | undefined;
+}
+type ComparisonMethod = 'pixel' | 'ssim';
+type FailureThresholdOptions = {
+  /**
+   * Failure threshold should measure in `pixel` or `percent`.
+   *
+   * Default is `pixel`.
+   */
+  failureThresholdType?: 'pixel' | 'percent' | undefined;
+  /**
+   * Failure tolerance threshold.
+   *
+   * If `failureThresholdType` is `pixel`, the value is the number of pixels that are allowed to be different.
+   * If `failureThresholdType` is `percent`, the value is the percentage of pixels that are allowed to be different.
+   *
+   * Default is `0`.
+   *
+   * @example
+   * ```ts
+   * // Allow 10 pixels to be different
+   * failureThresholdType: 'pixel'
+   * failureThreshold: 10
+   *
+   * // Allow 10% of pixels to be different
+   * failureThresholdType: 'percent'
+   * failureThreshold: 10
+   * ```
+   */
+  failureThreshold?: number | undefined;
+};
+type SsimComparisonOptions<M = 'ssim'> = {
+  comparisonMethod: M;
+  /**
+   * Custom options passed to 'ssim'
+   */
+  diffOptions?: Partial<SsimDiffOptions> | undefined;
+};
+type PixelComparisonOptions<M = 'pixel'> = {
+  comparisonMethod?: M | undefined;
+  /**
+   * Custom options passed to 'pixelmatch'
+   */
+  diffOptions?: PixelDiffOptions | undefined;
+};
+type PixelDiffOptions = Parameters<typeof pixelMatch>[5];
+type ImageSnapshotCompareOptions<M extends ComparisonMethod = 'pixel'> = (M extends 'ssim' ? SsimComparisonOptions<M> : PixelComparisonOptions<M>) & FailureThresholdOptions;
+type ImageSnapshotSubjectOptions = {
+  /**
+   * Specify the query of the subject element.
+   *
+   * If the test does not have an element with the specified query,
+   * the `body` element will be used.
+   */
+  subject?: string | undefined;
+};
+type ToMatchImageSnapshotOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTimeoutOptions & ImageSnapshotKeyOptions & ImageSnapshotCompareOptions<M> & {
+  /**
+   * Expect the matcher to fail.
+   * If it passes, it will throw an error with details.
+   */
+  expectToFail?: boolean | undefined;
+};
+interface PageImageSnapshotOptions {
+  fullPage?: boolean | undefined;
+}
+type ToMatchPageImageSnapshotOptions<M extends ComparisonMethod = 'pixel'> = ToMatchImageSnapshotOptions<M> & PageImageSnapshotOptions;
+type SnapshotTestMeta = {
+  meta: {
+    [NAME]?: SnapshotMeta<ComparisonMethod>;
+  };
+};
+//#endregion
+export { DIFF_DIR as _, ImageSnapshotKeyOptions as a, SNAPSHOT_ROOT_DIR as b, PageImageSnapshotOptions as c, SnapshotTestMeta as d, SsimComparisonOptions as f, BASELINE_DIR as g, ToMatchPageImageSnapshotOptions as h, ImageSnapshotCompareOptions as i, PixelComparisonOptions as l, ToMatchImageSnapshotOptions as m, ComparisonMethod as n, ImageSnapshotSubjectOptions as o, SsimDiffOptions as p, FailureThresholdOptions as r, ImageSnapshotTimeoutOptions as s, Awaitable as t, PixelDiffOptions as u, NAME as v, SnapshotMeta as x, RESULT_DIR as y };
+//# sourceMappingURL=types-DFb23VE1.d.mts.map

package/dist/types-DFb23VE1.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-DFb23VE1.d.mts","names":[],"sources":["../src/client/snapshot_meta.ts","../src/shared/constants.ts","../src/shared/types.ts"],"sourcesContent":[],"mappings":";;;;KAEY,uBAAuB,oBAAoB,4BAA4B,KAClF;;;AADD;;;EAAuD,MAAA,CAAA,EAAA,OAAA,GAAA,SAAA;EACtD,CAAA,GAAA,EAAA,MAAA,CAAA,EAAA,OAAA;CAA2B;;;cCHf,IAAA;cACA,iBAAA;cACA,YAAA;cACA,UAAA;ADDD,cCEC,QAAA,GDFW,WAAA;;;AAAZ,KEGA,SFHY,CAAA,CAAA,CAAA,GEGG,CFHH,GEGO,WFHP,CEGmB,CFHnB,CAAA;AAAW,UEKlB,2BAAA,CFLkB;EAAgD;;;;;;;ACFtE,UCgBI,uBAAA,CDhBA;EACJ;AACb;AACA;EACa,WAAQ,CAAA,EAAA,MAAA,GAAA,SAAA;;KCmBT,gBAAA;KAEA,uBAAA;EApBA;;;;;EAEK,oBAAA,CAAA,EAAA,OAA2B,GAAA,SAAA,GAAA,SAAA;EAS3B;AAOjB;AAEA;AA6BA;;;;;AAUA;AAQA;AAEA;;;;;;;;;EAKY,gBAAA,CAAA,EAAA,MAAA,GAAA,SAA2B;AASvC,CAAA;AAAkD,KAlCtC,qBAkCsC,CAAA,IAAA,MAAA,CAAA,GAAA;EAA8B,gBAAA,EAjC7D,CAiC6D;EAC/E;;;EAC2B,WAAA,CAAA,EA/Bb,OA+Ba,CA/BL,eA+BK,CAAA,GAAA,SAAA;AAQ5B,CAAA;AAIsD,KAtC1C,sBAsC0C,CAAA,IAAA,OAAA,CAAA,GAAA;EAA0D,gBAAA,CAAA,EArC5F,CAqC4F,GAAA,SAAA;EAA5B;;;EAGxE,WAAA,CAAA,EApCG,gBAoCa,GAAA,SAAA;CAEJ;AAAb,KAnCC,gBAAA,GAAmB,UAmCpB,CAAA,OAnCsC,UAmCtC,CAAA,CAAA,CAAA,CAAA;AAAR,KAjCS,2BAiCT,CAAA,UAjC+C,gBAiC/C,GAAA,OAAA,CAAA,GAAA,CAjC8E,CAiC9E,SAAA,MAAA,GAhCA,qBAgCA,CAhCsB,CAgCtB,CAAA,GA/BA,sBA+BA,CA/BuB,CA+BvB,CAAA,CAAA,GA9BF,uBA8BE;AAAI,KA5BK,2BAAA,GA4BL;;;;;;;;;KAnBK,sCAAsC,8BAA8B,8BAC/E,0BACA,4BAA4B;;;;;;;UAQZ,wBAAA;;;KAIL,0CAA0C,8BAA8B,4BAA4B,KAC/G;KAEW,gBAAA;;KAET,IAAA,IAAQ,aAAa"}

package/dist/types-Do1N7g4c.d.mts

@@ -0,0 +1,63 @@
+import { a as ImageSnapshotKeyOptions, n as ComparisonMethod, o as ImageSnapshotSubjectOptions, p as SsimDiffOptions, r as FailureThresholdOptions, s as ImageSnapshotTimeoutOptions, u as PixelDiffOptions } from "./types-DFb23VE1.mjs";
+
+//#region src/config/types.d.ts
+type VisOptions<M extends ComparisonMethod = 'pixel'> = (M extends 'ssim' ? {
+  comparisonMethod: M;
+  /**
+   * Custom options passed to 'ssim'
+   */
+  diffOptions?: Partial<SsimDiffOptions> | undefined;
+} : {
+  comparisonMethod?: M | undefined;
+  /**
+   * Custom options passed to 'pixelmatch'
+   */
+  diffOptions?: PixelDiffOptions | undefined;
+}) & FailureThresholdOptions & ImageSnapshotTimeoutOptions & ImageSnapshotKeyOptions & ImageSnapshotSubjectOptions & {
+  /**
+   * Loads the `test.setupFiles` of the specified preset.
+   *
+   * Note:
+   * - 'enable` is deprecated. Use `manual` for the same effect.
+   * - 'none` is deprecated. Use `custom` for the same effect.
+   *
+   * @default 'auto'
+   *
+   */
+  preset?: 'enable' | 'manual' | 'auto' | 'custom' | 'none' | undefined;
+  /**
+   * The snapshot folder relative to the root of the project.
+   *
+   * Default: `{projectRoot}/__vis__/{platform}`
+   */
+  snapshotRootDir?: string | ((context: {
+    ci: boolean;
+    browserName?: string | undefined;
+    providerName: string;
+    platform: string;
+    screenshotFailures?: boolean | undefined;
+    screenshotDirectory?: string | undefined;
+  }) => string) | undefined;
+  /**
+   * Customize the snapshot subpath.
+   *
+   * Typically, you place your test files either in a dedicated `tests` folder or in the `src` folder along with your source code.
+   * By default, the snapshot subpath is the test file path with that folder removed to reduces nesting of the snapshot folders.
+   *
+   * If you place your test files in multiple folders,
+   * such as in both `tests` and `src` folders,
+   * and they might have files with the same name and create conflicting snapshots,
+   * you can set this to customize the snapshot subpath.
+   *
+   * @param options - Options for customizing the snapshot subpath.
+   * @property subPath - The path of the test file to be used as the snapshot subpath.
+   *                     To retain the full path, simply return it.
+   * @returns The customized snapshot subpath.
+   */
+  snapshotSubpath?: ((options: {
+    subpath: string;
+  }) => string) | undefined;
+};
+//#endregion
+export { VisOptions as t };
+//# sourceMappingURL=types-Do1N7g4c.d.mts.map

package/dist/types-Do1N7g4c.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-Do1N7g4c.d.mts","names":[],"sources":["../src/config/types.ts"],"sourcesContent":[],"mappings":";;;KAcY,qBAAqB,+BAA+B;EAApD,gBAAU,EAED,CAFC;EAAW;;;EAMR,WAAA,CAAA,EAAR,OAAQ,CAAA,eAAA,CAAA,GAAA,SAAA;CAAR,GAAA;EAGK,gBAAA,CAAA,EAAA,CAAA,GAAA,SAAA;EAIL;;;EAIhB,WAAA,CAAA,EAJgB,gBAIhB,GAAA,SAAA;CACA,CAAA,GAHA,uBAGA,GAFA,2BAEA,GADA,uBACA,GAAA,2BAAA,GAAA;EAA2B"}

package/dist/vis_server_context.types-Ce1f9vOO.d.mts

@@ -0,0 +1 @@
+export { };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "3.5.1",
+  "version": "4.0.0",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",
@@ -20,50 +20,51 @@
   },
   "type": "module",
   "imports": {
-    "#vitest-plugin-vis/config": "./src/config.ts"
+    "#vitest-plugin-vis/config": "./src/config.ts",
+    "#vitest-plugin-vis/setup": "./src/setup.ts"
   },
   "exports": {
     ".": {
-      "types": "./esm/index.d.ts",
-      "default": "./esm/index.js"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./config": {
-      "types": "./esm/config.d.ts",
-      "default": "./esm/config.js"
+      "types": "./dist/config.d.mts",
+      "default": "./dist/config.mjs"
     },
     "./client-api": {
-      "types": "./esm/client-api.d.ts",
-      "default": "./esm/client-api.js"
+      "types": "./dist/client-api.d.mts",
+      "default": "./dist/client-api.mjs"
     },
     "./presets/auto": {
-      "types": "./esm/presets/auto.d.ts",
-      "default": "./esm/presets/auto.js"
+      "types": "./dist/presets/auto.d.mts",
+      "default": "./dist/presets/auto.mjs"
     },
     "./presets/enable": {
-      "types": "./esm/presets/enable.d.ts",
-      "default": "./esm/presets/enable.js"
+      "types": "./dist/presets/enable.d.mts",
+      "default": "./dist/presets/enable.mjs"
     },
     "./presets/manual": {
-      "types": "./esm/presets/manual.d.ts",
-      "default": "./esm/presets/manual.js"
+      "types": "./dist/presets/manual.d.mts",
+      "default": "./dist/presets/manual.mjs"
     },
     "./server-utils": {
-      "types": "./esm/server-utils.d.ts",
-      "default": "./esm/server-utils.js"
+      "types": "./dist/server-utils.d.mts",
+      "default": "./dist/server-utils.mjs"
     },
     "./setup": {
-      "types": "./esm/setup.d.ts",
-      "default": "./esm/setup.js"
+      "types": "./dist/setup.d.mts",
+      "default": "./dist/setup.mjs"
     },
     "./testing": {
-      "types": "./esm/testing.d.ts",
-      "default": "./esm/testing.js"
+      "types": "./dist/testing.d.mts",
+      "default": "./dist/testing.mjs"
     },
     "./package.json": "./package.json"
   },
-  "types": "./esm/index.d.ts",
+  "types": "./dist/index.d.mts",
   "files": [
-    "esm",
+    "dist",
     "src",
     "!**/*.{spec,test,unit,accept,integrate,system,perf,stress}.*"
   ],
@@ -80,44 +81,58 @@
     "type-plus": "8.0.0-beta.7"
   },
   "devDependencies": {
-    "@repobuddy/storybook": "^2.0.0",
+    "@repobuddy/storybook": "^2.1.2",
     "@repobuddy/typescript": "^2.1.0",
-    "@storybook-community/storybook-dark-mode": "^7.0.0",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-vitest": "^9.1.13",
-    "@storybook/react-vite": "^9.1.15",
+    "@storybook-community/storybook-dark-mode": "^7.0.3",
+    "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-vitest": "^10.1.2",
+    "@storybook/react-vite": "^10.1.2",
     "@tailwindcss/vite": "^4.1.14",
     "@types/is-ci": "^3.0.4",
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.2",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-istanbul": "^4.0.3",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/expect": "^4.0.6",
+    "@vitest/browser": "^4.0.9",
+    "@vitest/browser-playwright": "^4.0.9",
+    "@vitest/browser-webdriverio": "^4.0.9",
+    "@vitest/coverage-istanbul": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.9",
+    "@vitest/expect": "^4.0.9",
+    "@vitest/ui": "4.0.9",
     "cross-env": "^10.0.0",
     "never-fail": "^1.1.4",
     "npm-run-all2": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "storybook": "^9.1.10",
-    "storybook-addon-tag-badges": "^3.0.0",
+    "storybook": "^10.1.2",
+    "storybook-addon-tag-badges": "^3.0.2",
     "tailwindcss": "^4.1.14",
+    "tsdown": "^0.16.6",
     "typescript": "^5.9.3",
     "vite": "^7.1.12",
-    "vitest": "^3.2.4",
-    "vitest-browser-react": "^1.0.0"
+    "vitest": "^4.0.9",
+    "vitest-browser-react": "^2.0.2"
   },
   "peerDependencies": {
-    "@vitest/browser": "^2 || ^3",
-    "vitest": "^2 || ^3"
+    "@vitest/browser": "^4",
+    "@vitest/browser-playwright": "^4",
+    "@vitest/browser-webdriverio": "^4",
+    "vitest": "^4"
+  },
+  "peerDependenciesMeta": {
+    "@vitest/browser-playwright": {
+      "optional": true
+    },
+    "@vitest/browser-webdriverio": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -b tsconfig.esm.json",
+    "build": "tsdown",
     "build:watch": "tsc  -b tsconfig.esm.json -w",
-    "clean": "rimraf coverage esm --glob *.tsbuildinfo vitest.*.timestamp*",
+    "clean": "rimraf coverage dist esm --glob *.tsbuildinfo vitest.*.timestamp*",
     "clean:vis:local": "rimraf __vis__/local",
     "cov": "cross-env COVERAGE=true vitest run --coverage",
     "coverage": "cross-env COVERAGE=true vitest run --coverage",
@@ -127,6 +142,7 @@
     "sb": "storybook dev -p 6007",
     "t:node": "vitest --project=vpv:node",
     "t:pw": "vitest run --project=\"vpv:pw (*)\"",
+    "t:t": "tsc --noEmit",
     "t:wd": "vitest run --project=\"vpv:wd (*)\"",
     "test": "vitest run",
     "test:u": "vitest run -u",

package/readme.md

@@ -26,6 +26,7 @@ The [`vitest-plugin-vis`][vitest-plugin-vis] plugin can be used without customiz
 
 ```ts
 // vitest.config.ts
+import { playwright } from '@vitest/browser-playwright'
 import { defineConfig } from 'vitest/config'
 import { vis } from 'vitest-plugin-vis/config'
 
@@ -45,6 +46,14 @@ export default defineConfig({
 			instances: [
 				{ browser: 'chromium' }
 			]
+		},
+		// vitest v4
+		browser: {
+			enabled: true,
+			provider: playwright(),
+			instances: [
+				{ browser: 'chromium' }
+			]
 		}
 	}
 })
@@ -166,7 +175,50 @@ By default, the plugin will trim the common folder such as `src` or `test` from
 If you place your test files in multiple folders,
 such as in both `tests` and `src` folders,
 and they might have files with the same name and create conflicting snapshots,
-you can customize it.
+you can use `snapshotSubpath` to customize the snapshot sub-path to avoid conflicts.
+
+```ts
+// vitest.config.ts
+import { storybookVis } from 'storybook-addon-vis/vitest-plugin'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+	plugins: [
+		storybookVis({
+			// keep the folder structure
+			snapshotSubpath: (subpath) => subpath
+		})
+	],
+	// ...
+})
+```
+
+With the above configuration, the snapshot folder structure will look like this:
+
+```ini
+v __vis__
+	> # ...
+	v local # snapshot generated on local machine
+		> __baselines__
+			v examples
+				v button.stories.tsx
+					snapshot-1.png
+					snapshot-2.png
+			v src
+				v button.stories.tsx
+					snapshot-1.png
+					snapshot-2.png
+			v tests
+				v button.stories.tsx
+					snapshot-1.png
+					snapshot-2.png
+v examples
+	button.stories.tsx
+v src
+	button.stories.tsx
+v tests
+	button.stories.tsx
+```
 
 > `MyComponent/className/can-customize-className`: `snapshotId`
 
@@ -231,7 +283,7 @@ You can also customize the subject per test using the `setAutoSnapshotOptions` f
 
 ```ts
 // some.test.ts
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 import { expect, it } from 'vitest'
 import { render } from 'vitest-browser-react'
 import { setAutoSnapshotOptions } from 'vitest-plugin-vis'
@@ -386,7 +438,7 @@ You can take snapshots manually:
 ```ts
 // some.test.ts
 import { render } from 'vitest-browser-react'
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 import { it } from 'vitest'
 
 it('manual snapshot', async ({ expect }) => {
@@ -403,7 +455,7 @@ You can customize the snapshot comparison options per assertion:
 ```ts
 // some.test.ts
 import { render } from 'vitest-browser-react'
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 import { it } from 'vitest'
 
 it('manual snapshot with options', async ({ expect }) => {
@@ -426,7 +478,7 @@ it('manual snapshot with options', async ({ expect }) => {
 You can also take a full page snapshot:
 
 ```ts
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 import { it } from 'vitest'
 
 it('full page snapshot', async () => {
@@ -439,7 +491,7 @@ it('full page snapshot', async () => {
 While less common, you can also check if a snapshot exists:
 
 ```ts
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 import { it } from 'vitest'
 
 it('Has Snapshot', async ({ expect }) => {

package/src/client/actions/match_image_snapshot_action.ts

@@ -1,4 +1,4 @@
-import type { BrowserCommands } from '@vitest/browser/context'
+import type { BrowserCommands } from 'vitest/browser'
 import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
 import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'

package/src/client/actions/match_page_image_snapshot_action.ts

@@ -1,4 +1,4 @@
-import type { BrowserCommands } from '@vitest/browser/context'
+import type { BrowserCommands } from 'vitest/browser'
 import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
 import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'

package/src/client/auto_snapshot_options.ts

@@ -17,6 +17,21 @@ export type MetaTask =
 /**
  * Set the snapshot options for auto snapshot.
  *
+ * You can use it in beforeAll, beforeEach, or individual test cases.
+ *
+ * @param meta - The snapshot options to set.
+ * You can pass a boolean to enable/disable the snapshot, or an object with the snapshot options.
+ * When passing an object, the `enable` property will be set to `true` by default unless you explicitly set it to `false`.
+ * @param meta.enable - Whether to enable the snapshot.
+ * @param meta.snapshotKey - The key to use for the snapshot.
+ * @param meta.comparisonMethod - The comparison method to use for the snapshot.
+ * @param meta.diffOptions - The diff options to use for the snapshot.
+ * @param meta.failureThreshold - The failure threshold to use for the snapshot.
+ * @param meta.failureThresholdType - The failure threshold type to use for the snapshot.
+ * @param meta.timeout - The timeout to use for the snapshot.
+ *
+ * @example
+ *
  * ```ts
  * beforeAll(() => setAutoSnapshotOptions(...))
  * beforeEach(() => setAutoSnapshotOptions(...))
@@ -26,7 +41,7 @@ export type MetaTask =
  * })
  * ```
  */
-export function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: SnapshotMeta<M> | boolean): void {
+export function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: boolean | SnapshotMeta<M>): void {
 	if (typeof meta === 'object') {
 		assertSnapshotKeyWithoutDash(meta.snapshotKey)
 	}

package/src/client/compare_image_snapshot.ts

@@ -1,4 +1,4 @@
-import type { BrowserCommands } from '@vitest/browser/context'
+import type { BrowserCommands } from 'vitest/browser'
 import dedent from 'dedent'
 import { resolve } from 'pathe'
 import type { ImageSnapshotNextIndexCommand } from '../commands.ts'

package/src/client/expect/to_match_image_snapshot.ts

@@ -1,4 +1,4 @@
-import { commands } from '@vitest/browser/context'
+import { commands } from 'vitest/browser'
 import type { AsyncExpectationResult } from '@vitest/expect'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 import { matchImageSnapshotAction } from '../actions/match_image_snapshot_action.ts'

package/src/client/page/extend.ts

@@ -1,4 +1,4 @@
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 import './augment.ts'
 import { hasImageSnapshot } from './has_image_snapshot.ts'
 import { toMatchImageSnapshot } from './to_match_image_snapshot.ts'

package/src/client/page/has_image_snapshot.mdx

@@ -11,7 +11,7 @@ This method allows you to conditionally execute code based on whether a snapshot
 ## Basic Usage
 
 ```ts
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 
 it('should check if snapshot exists', async ({ expect }) => {
 	const hasSnapshot = await page.hasImageSnapshot()

package/src/client/page/has_image_snapshot.ts

@@ -1,4 +1,4 @@
-import { type BrowserPage, commands } from '@vitest/browser/context'
+import { type BrowserPage, commands } from 'vitest/browser'
 import type { ImageSnapshotKeyOptions } from '../../shared/types.ts'
 import { hasImageSnapshotAction } from '../actions/has_image_snapshot_action.ts'
 import { ctx } from '../ctx.ts'

package/src/client/page/to_match_image_snapshot.mdx

@@ -11,7 +11,7 @@ Unlike `expect().toMatchImageSnapshot()` which targets specific elements, `page.
 ## Basic Usage
 
 ```ts
-import { page } from '@vitest/browser/context'
+import { page } from 'vitest/browser'
 
 it('should take a page snapshot', async () => {
 	// Your test setup here

package/src/client/page/to_match_image_snapshot.ts

@@ -1,4 +1,4 @@
-import { commands } from '@vitest/browser/context'
+import { commands } from 'vitest/browser'
 import type { ComparisonMethod, ToMatchPageImageSnapshotOptions } from '../../shared/types.ts'
 import { matchPageImageSnapshotAction } from '../actions/match_page_image_snapshot_action.ts'
 import { ctx } from '../ctx.ts'

package/src/client/setup/create_vis.ts

@@ -8,6 +8,21 @@ import { shouldTakeSnapshot } from '../should_take_snapshot.ts'
 import type { SnapshotMeta } from '../snapshot_meta.ts'
 import { toTaskId } from '../task_id.ts'
 
+export type SetupVisOptions<GM extends Record<string, any> | unknown = unknown> = {
+	auto?:
+		| boolean
+		| (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(
+				options: SnapshotMeta<C> & M & GM,
+		  ) => Promise<boolean> | Promise<void> | boolean | void)
+		| Record<
+				string,
+				| boolean
+				| (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(
+						options: SnapshotMeta<C> & M & GM,
+				  ) => Promise<boolean> | Promise<void> | boolean | void)
+		  >
+}
+
 /**
  * Visual test configuration on the client side.
  */
@@ -40,20 +55,7 @@ export type VisClientConfigurator<GM extends Record<string, any> | unknown = unk
 	 * })
 	 * ```
 	 */
-	setup(options?: {
-		auto?:
-			| boolean
-			| (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(
-					options: SnapshotMeta<C> & M & GM,
-			  ) => Promise<boolean> | Promise<void> | boolean | void)
-			| Record<
-					string,
-					| boolean
-					| (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(
-							options: SnapshotMeta<C> & M & GM,
-					  ) => Promise<boolean> | Promise<void> | boolean | void)
-			  >
-	}): void
+	setup(options?: SetupVisOptions<GM>): void
 	/**
 	 * @deprecated Use `vis.setup()` instead.
 	 */