vitest-plugin-vis 3.5.1 → 4.1.0

package/dist/to_match_image_snapshot.types--tTmHoRA.d.mts

@@ -0,0 +1,9 @@
+import { _ as ToMatchImageSnapshotOptions, n as ComparisonMethod } from "./types-CEmjj-A9.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--tTmHoRA.d.mts.map

package/dist/to_match_image_snapshot.types--tTmHoRA.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to_match_image_snapshot.types--tTmHoRA.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-DBThLerp.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-DBThLerp.d.mts.map

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

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

package/dist/types-CEmjj-A9.d.mts

@@ -0,0 +1,144 @@
+import pixelMatch from "pixelmatch";
+import { Options as SsimDiffOptions } from "ssim.js";
+
+//#region src/client/task/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>;
+  };
+};
+type ImageSnapshotComparisonInfo = {
+  /**
+   * Path to the project root.
+   */
+  projectRoot: string;
+  /**
+   * Path to the baseline image relative to the project root.
+   */
+  baselinePath: string;
+  /**
+   * Path to the result image relative to the project root.
+   */
+  resultPath: string;
+  /**
+   * Path to the diff image relative to the project root.
+   */
+  diffPath: string;
+  /**
+   * Base64 encoded baseline image.
+   */
+  baseline: string;
+  /**
+   * Base64 encoded result image.
+   */
+  result: string;
+  /**
+   * Base64 encoded diff image.
+   */
+  diff?: string | undefined;
+} & ImageSnapshotTimeoutOptions & FailureThresholdOptions & (SsimComparisonOptions | PixelComparisonOptions);
+type MatchImageSnapshotOptions = ImageSnapshotTimeoutOptions & ImageSnapshotCompareOptions<any> & ImageSnapshotKeyOptions;
+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)>;
+};
+//#endregion
+export { SNAPSHOT_ROOT_DIR as C, RESULT_DIR as S, ToMatchImageSnapshotOptions as _, ImageSnapshotComparisonInfo as a, DIFF_DIR as b, ImageSnapshotTimeoutOptions as c, PixelComparisonOptions as d, PixelDiffOptions as f, SsimDiffOptions as g, SsimComparisonOptions as h, ImageSnapshotCompareOptions as i, MatchImageSnapshotOptions as l, SnapshotTestMeta as m, ComparisonMethod as n, ImageSnapshotKeyOptions as o, SetupVisOptions as p, FailureThresholdOptions as r, ImageSnapshotSubjectOptions as s, Awaitable as t, PageImageSnapshotOptions as u, ToMatchPageImageSnapshotOptions as v, SnapshotMeta as w, NAME as x, BASELINE_DIR as y };
+//# sourceMappingURL=types-CEmjj-A9.d.mts.map

package/dist/types-CEmjj-A9.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-CEmjj-A9.d.mts","names":[],"sources":["../src/client/task/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;EAIK;;;;;;EAiCA,OAAA,CAAA,EAAA,MAAA,GAAA,SAAyB;CAAG;AACvC,KAzDW,2BAyDX,CAAA,UAzDiD,gBAyDjD,GAAA,OAAA,CAAA,GAzD+E,2BAyD/E,GAxDA,uBAwDA,GAvDA,2BAuDA,CAvD4B,CAuD5B,CAAA,GAAA;EACA;;AAED;;EAGgB,YAAA,CAAA,EAAA,OAAA,GAAA,SAAA;CAA4B;AAClB,UAtDT,wBAAA,CAsDS;EAAb,QAAA,CAAA,EAAA,OAAA,GAAA,SAAA;;AAAsB,KAlDvB,+BAkDuB,CAAA,UAlDmB,gBAkDnB,GAAA,OAAA,CAAA,GAlDiD,2BAkDjD,CAlD6E,CAkD7E,CAAA,GAjDlC,wBAiDkC;AAC1B,KAhDG,gBAAA,GAgDH;EAAmB,IAAA,EAAA;IAIV,CAlDf,IAAA,EAkDe,EAlDP,YAkDO,CAlDM,gBAkDN,CAAA;EAA4B,CAAA;CAClB;AAAb,KA/CH,2BAAA,GA+CG;EAAkB;;;EACH,WAAA,EAAA,MAAA;EAL1B;;;;;;;;;;;;;;;;;;;;;;;;IAdA,8BACH,2BACC,wBAAwB;KAEd,yBAAA,GAA4B,8BACvC,mCACA;KAEW,2BAA2B;+BAGvB,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB,kCACxB,qCAGc,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB"}

package/dist/types-DJYCbyT8.d.mts

@@ -0,0 +1,63 @@
+import { c as ImageSnapshotTimeoutOptions, f as PixelDiffOptions, g as SsimDiffOptions, n as ComparisonMethod, o as ImageSnapshotKeyOptions, r as FailureThresholdOptions, s as ImageSnapshotSubjectOptions } from "./types-CEmjj-A9.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-DJYCbyT8.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types-DJYCbyT8.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "3.5.1",
+  "version": "4.1.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.2.0-alpha.1",
+    "@storybook/addon-vitest": "^10.2.0-alpha.1",
+    "@storybook/react-vite": "^10.2.0-alpha.1",
     "@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.2.0-alpha.1",
+    "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/has_image_snapshot_action.ts

@@ -1,4 +1,4 @@
-import type { HasImageSnapshotCommand, ImageSnapshotNextIndexCommand } from '../../commands.ts'
+import type { HasImageSnapshotCommand, ImageSnapshotNextIndexCommand } from '../../shared/commands.types.ts'
 import type { ImageSnapshotKeyOptions } from '../../shared/types.ts'
 
 export function hasImageSnapshotAction(

package/src/client/actions/load_image_snapshot_results_action.ts

@@ -1,4 +1,4 @@
-import type { LoadImageSnapshotResultsCommand } from '../../server/commands/load_image_snapshot_results.ts'
+import type { LoadImageSnapshotResultsCommand } from '../../shared/commands.types.ts'
 
 export function loadImageSnapshotResultsAction(commands: LoadImageSnapshotResultsCommand, taskId: string) {
 	return commands.loadImageSnapshotResults(taskId)

package/src/client/actions/match_image_snapshot_action.ts

@@ -1,11 +1,13 @@
-import type { BrowserCommands } from '@vitest/browser/context'
-import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
-import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
+import type { BrowserCommands } from 'vitest/browser'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
 import { isBase64String } from '../../shared/base64.ts'
+import type {
+	ImageSnapshotNextIndexCommand,
+	PrepareImageSnapshotComparisonCommand,
+} from '../../shared/commands.types.ts'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
-import { compareImageSnapshot } from '../compare_image_snapshot.ts'
-import { convertElementToCssSelector } from '../selector.ts'
+import { convertElementToCssSelector } from '../external/browser/selector.ts'
+import { compareImageSnapshot } from '../snapshot/compare_image_snapshot.ts'
 
 export async function matchImageSnapshotAction(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,

package/src/client/actions/match_page_image_snapshot_action.ts

@@ -1,9 +1,11 @@
-import type { BrowserCommands } from '@vitest/browser/context'
-import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
-import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
+import type { BrowserCommands } from 'vitest/browser'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
+import type {
+	ImageSnapshotNextIndexCommand,
+	PrepareImageSnapshotComparisonCommand,
+} from '../../shared/commands.types.ts'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
-import { compareImageSnapshot } from '../compare_image_snapshot.ts'
+import { compareImageSnapshot } from '../snapshot/compare_image_snapshot.ts'
 
 export async function matchPageImageSnapshotAction(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,

package/src/client/expect/_ctx.ts

@@ -0,0 +1,10 @@
+import { commands } from 'vitest/browser'
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export const ctx = {
+	commands,
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/expect/to_match_image_snapshot.ts

@@ -1,9 +1,8 @@
-import { commands } from '@vitest/browser/context'
 import type { AsyncExpectationResult } from '@vitest/expect'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 import { matchImageSnapshotAction } from '../actions/match_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
 import { success } from './expectation_result.ts'
 
 export function toMatchImageSnapshot(
@@ -26,5 +25,5 @@ export function toMatchImageSnapshot(
 		)
 	}
 
-	return matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success)
+	return matchImageSnapshotAction(ctx.commands, toTaskId(test), subject, options).then(() => success)
 }

package/src/client/external/browser/has_render_content.ts

@@ -0,0 +1,3 @@
+export function hasRenderContent() {
+	return document.body.childElementCount > 0
+}

package/src/client/{image_resizer.ts → external/browser/image_resizer.ts}

@@ -1,4 +1,4 @@
-import { isSameSize } from '../shared/is_same_size.ts'
+import { isSameSize } from '../../../shared/is_same_size.ts'
 
 export const createImageResizer =
 	({ width, height }: { width: number; height: number }) =>

package/src/client/{vitest_browser_context_proxy.ts → external/vitest/vitest_browser_context_proxy.ts}

@@ -1,10 +1,10 @@
-import type { BrowserCommands, Platform } from '@vitest/browser/context'
 import type { SerializedConfig } from 'vitest'
+import type { BrowserCommands, Platform } from 'vitest/browser'
 
-let ctx: Awaited<typeof import('@vitest/browser/context')>
+let ctx: Awaited<typeof import('vitest/browser')>
 
 if ((globalThis as any).__vitest_browser__) {
-	import('@vitest/browser/context').then((m) => {
+	import('vitest/browser').then((m) => {
 		ctx = m
 	})
 }

package/src/client/{vitest_suite_proxy.ts → external/vitest/vitest_suite_proxy.ts}

@@ -1,4 +1,4 @@
-import type { SnapshotTestMeta } from '../shared/types.ts'
+import type { SnapshotTestMeta } from '../../../shared/types.ts'
 
 let vitestSuite: Awaited<typeof import('vitest/suite')>
 

package/src/client/{align_images.ts → image/align_images.ts}

@@ -1,6 +1,6 @@
-import { getMaxSize } from '../shared/get_max_size.ts'
-import { isSameSize } from '../shared/is_same_size.ts'
-import { createImageResizer } from './image_resizer.ts'
+import { getMaxSize } from '../../shared/get_max_size.ts'
+import { isSameSize } from '../../shared/is_same_size.ts'
+import { createImageResizer } from '../external/browser/image_resizer.ts'
 
 export function alignImagesToSameSize(image1: ImageData, image2: ImageData): [image1: ImageData, image2: ImageData] {
 	if (isSameSize(image1, image2)) return [image1, image2] as const