vitest-image-snapshot 0.6.22 → 0.6.23

package/dist/ImageSnapshotReporter-C3C7yfn1.d.ts

@@ -0,0 +1,22 @@
+import { Reporter, TestCase, Vitest } from "vitest/node";
+
+//#region src/ImageSnapshotReporter.d.ts
+interface ImageSnapshotReporterOptions {
+  /** Report directory (relative to config.root or absolute) */
+  reportPath?: string;
+  autoOpen?: boolean;
+}
+/** Vitest reporter that generates HTML diff reports for image snapshot failures */
+declare class ImageSnapshotReporter implements Reporter {
+  private failures;
+  private vitest;
+  private reportPath?;
+  private autoOpen;
+  constructor(options?: ImageSnapshotReporterOptions);
+  onInit(vitest: Vitest): void;
+  onTestCaseResult(testCase: TestCase): void;
+  onTestRunEnd(): Promise<void>;
+  private resolveReportDir;
+}
+//#endregion
+export { ImageSnapshotReporterOptions as n, ImageSnapshotReporter as t };

package/dist/ImageSnapshotReporter-D1-9tyxx.js

@@ -0,0 +1,314 @@
+import { exec } from "node:child_process";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+//#region src/DiffReport.ts
+/** Generate HTML diff report for all failed image snapshots. */
+async function generateDiffReport(failures, config) {
+	const { autoOpen = false, reportDir, configRoot } = config;
+	if (failures.length === 0) return;
+	await fs.promises.mkdir(reportDir, { recursive: true });
+	const html = createReportHTML(await copyImagesToReport(failures, reportDir, configRoot));
+	const outputPath = path.join(reportDir, "index.html");
+	await fs.promises.writeFile(outputPath, html, "utf-8");
+	console.log(`\n📊 Image diff report: ${outputPath}`);
+	if (autoOpen) exec(`${process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open"} "${outputPath}"`);
+}
+/** Copy images to report dir, preserving directory structure relative to configRoot */
+async function copyImagesToReport(failures, reportDir, configRoot) {
+	return Promise.all(failures.map(async (failure) => {
+		const copiedPaths = await copyImageSet(failure.paths, reportDir, configRoot);
+		return {
+			...failure,
+			paths: copiedPaths
+		};
+	}));
+}
+async function copyImageSet(paths, reportDir, configRoot) {
+	return {
+		reference: await copyImage(paths.reference, reportDir, configRoot),
+		actual: await copyImage(paths.actual, reportDir, configRoot),
+		diff: await copyImage(paths.diff, reportDir, configRoot)
+	};
+}
+/** Copy single image to report dir, preserving directory structure relative to configRoot */
+async function copyImage(sourcePath, reportDir, configRoot) {
+	if (!fs.existsSync(sourcePath)) return "";
+	const relativePath = path.relative(configRoot, sourcePath);
+	const destPath = path.join(reportDir, relativePath);
+	const destDir = path.dirname(destPath);
+	await fs.promises.mkdir(destDir, { recursive: true });
+	await fs.promises.copyFile(sourcePath, destPath);
+	return relativePath;
+}
+function createReportHTML(failures) {
+	const timestamp = (/* @__PURE__ */ new Date()).toLocaleString();
+	const totalFailures = failures.length;
+	const rows = failures.map((failure) => {
+		const { testName, snapshotName, comparison, paths } = failure;
+		const { mismatchedPixels, mismatchedPixelRatio } = comparison;
+		return `
+      <tr>
+        <td class="test-name">
+          <strong>${escapeHtml(testName)}</strong><br>
+          <code>${escapeHtml(snapshotName)}</code>
+        </td>
+        <td class="image-cell">
+          <a href="${paths.reference}" target="_blank">
+            <img src="${paths.reference}" alt="Expected" />
+          </a>
+          <div class="label">Expected</div>
+        </td>
+        <td class="image-cell">
+          <a href="${paths.actual}" target="_blank">
+            <img src="${paths.actual}" alt="Actual" />
+          </a>
+          <div class="label">Actual</div>
+        </td>
+        <td class="image-cell">
+          ${diffCellHTML(paths.diff)}
+        </td>
+        <td class="stats">
+          <div><strong>${mismatchedPixels}</strong> pixels</div>
+          <div><strong>${(mismatchedPixelRatio * 100).toFixed(2)}%</strong></div>
+        </td>
+      </tr>
+    `;
+	}).join("\n");
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Image Snapshot Failures - ${totalFailures} failed</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    header {
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      margin-bottom: 20px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    h1 {
+      color: #d73027;
+      margin-bottom: 10px;
+    }
+    .meta {
+      color: #666;
+      font-size: 14px;
+    }
+    .update-hint {
+      background: #fff3cd;
+      border: 1px solid #ffc107;
+      border-radius: 4px;
+      padding: 12px;
+      margin: 15px 0;
+    }
+    .update-hint code {
+      background: #f8f9fa;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-family: 'Monaco', 'Courier New', monospace;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      background: white;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    th, td {
+      padding: 15px;
+      text-align: left;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #333;
+      text-align: center;
+    }
+    tr:last-child td {
+      border-bottom: none;
+    }
+    tr:hover {
+      background: #fafafa;
+    }
+    .test-name {
+      min-width: 200px;
+      vertical-align: top;
+    }
+    .test-name strong {
+      color: #333;
+    }
+    .test-name code {
+      color: #666;
+      font-size: 12px;
+      background: #f5f5f5;
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+    .image-cell {
+      text-align: center;
+      vertical-align: top;
+      width: 25%;
+    }
+    .image-cell a {
+      display: block;
+      text-decoration: none;
+    }
+    .image-cell img {
+      max-width: 100%;
+      height: auto;
+      max-height: 300px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    .image-cell img:hover {
+      transform: scale(1.02);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+    .label {
+      margin-top: 8px;
+      font-size: 12px;
+      color: #666;
+      font-weight: 500;
+    }
+    .no-diff {
+      color: #999;
+      font-size: 13px;
+      font-style: italic;
+      padding: 20px;
+      text-align: center;
+    }
+    .stats {
+      text-align: center;
+      color: #d73027;
+      font-size: 14px;
+      vertical-align: top;
+    }
+    .stats div {
+      margin: 5px 0;
+    }
+    footer {
+      margin-top: 20px;
+      text-align: center;
+      color: #999;
+      font-size: 12px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>🔴 Image Snapshot Failures</h1>
+    <div class="meta">
+      <strong>${totalFailures}</strong> test${totalFailures === 1 ? "" : "s"} failed •
+      Generated: ${escapeHtml(timestamp)}
+    </div>
+    <div class="update-hint">
+      💡 <strong>To update snapshots:</strong> Run <code>pnpm test -- -u</code> or <code>vitest -u</code>
+    </div>
+  </header>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Test</th>
+        <th>Expected</th>
+        <th>Actual</th>
+        <th>Diff</th>
+        <th>Mismatch</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${rows}
+    </tbody>
+  </table>
+
+  <footer>
+    Click images to view full size •
+    Diff images highlight mismatched pixels in yellow/red
+  </footer>
+</body>
+</html>`;
+}
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function diffCellHTML(diffPath) {
+	if (!diffPath) return `<div class="no-diff">No diff image<br/>(dimension mismatch)</div>`;
+	return `<a href="${diffPath}" target="_blank">
+            <img src="${diffPath}" alt="Diff" />
+          </a>
+          <div class="label">Diff</div>`;
+}
+
+//#endregion
+//#region src/ImageSnapshotReporter.ts
+/** Vitest reporter that generates HTML diff reports for image snapshot failures */
+var ImageSnapshotReporter = class {
+	failures = [];
+	vitest;
+	reportPath;
+	autoOpen;
+	constructor(options = {}) {
+		this.reportPath = options.reportPath;
+		this.autoOpen = options.autoOpen ?? process.env.IMAGE_DIFF_AUTO_OPEN === "true";
+	}
+	onInit(vitest) {
+		this.vitest = vitest;
+	}
+	onTestCaseResult(testCase) {
+		const result = testCase.result();
+		if (result?.state !== "failed") return;
+		const meta = testCase.meta();
+		if (!meta.imageSnapshotFailure) return;
+		const error = result.errors?.[0];
+		const failure = captureFailure(testCase, meta.imageSnapshotFailure, error?.message || "");
+		this.failures.push(failure);
+	}
+	async onTestRunEnd() {
+		if (this.failures.length === 0) return;
+		const reportDir = this.resolveReportDir();
+		await generateDiffReport(this.failures, {
+			autoOpen: this.autoOpen,
+			reportDir,
+			configRoot: this.vitest.config.root
+		});
+	}
+	resolveReportDir() {
+		const configRoot = this.vitest.config.root;
+		if (!this.reportPath) return path.join(configRoot, "__image_diff_report__");
+		return path.isAbsolute(this.reportPath) ? this.reportPath : path.join(configRoot, this.reportPath);
+	}
+};
+function captureFailure(testCase, data, message) {
+	const snapshotName = data.actualPath.match(/([^/]+)\.png$/)?.[1] || "unknown";
+	return {
+		testName: testCase.fullName || testCase.name,
+		snapshotName,
+		comparison: {
+			pass: false,
+			message,
+			mismatchedPixels: data.mismatchedPixels,
+			mismatchedPixelRatio: data.mismatchedPixelRatio
+		},
+		paths: {
+			reference: data.expectedPath,
+			actual: data.actualPath,
+			diff: data.diffPath
+		}
+	};
+}
+
+//#endregion
+export { generateDiffReport as n, ImageSnapshotReporter as t };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Reporter, TestCase, Vitest } from "vitest/node";
+import { n as ImageSnapshotReporterOptions, t as ImageSnapshotReporter } from "./ImageSnapshotReporter-C3C7yfn1.js";
 
 //#region src/ImageComparison.d.ts
 /** nodejs compatible interface to DOM ImageData */
@@ -59,25 +59,6 @@ interface MatchImageOptions extends ComparisonOptions {
 /** Register toMatchImage() matcher with Vitest */
 declare function imageMatcher(): void;
 //#endregion
-//#region src/ImageSnapshotReporter.d.ts
-interface ImageSnapshotReporterOptions {
-  /** Report directory (relative to config.root or absolute) */
-  reportPath?: string;
-  autoOpen?: boolean;
-}
-/** Vitest reporter that generates HTML diff reports for image snapshot failures */
-declare class ImageSnapshotReporter implements Reporter {
-  private failures;
-  private vitest;
-  private reportPath?;
-  private autoOpen;
-  constructor(options?: ImageSnapshotReporterOptions);
-  onInit(vitest: Vitest): void;
-  onTestCaseResult(testCase: TestCase): void;
-  onTestRunEnd(): Promise<void>;
-  private resolveReportDir;
-}
-//#endregion
 //#region src/PNGUtil.d.ts
 /** Convert standard browser ImageData to PNG Buffer for comparison. */
 declare function pngBuffer(imageData: ImageData): Buffer;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { exec } from "node:child_process";
+import { n as generateDiffReport, t as ImageSnapshotReporter } from "./ImageSnapshotReporter-D1-9tyxx.js";
 import * as fs from "node:fs";
 import * as path from "node:path";
 import pixelmatch from "pixelmatch";
@@ -6,244 +6,6 @@ import { PNG } from "pngjs";
 import { expect } from "vitest";
 import { getCurrentTest } from "vitest/suite";
 
-//#region src/DiffReport.ts
-/** Generate HTML diff report for all failed image snapshots. */
-async function generateDiffReport(failures, config) {
-	const { autoOpen = false, reportDir, configRoot } = config;
-	if (failures.length === 0) return;
-	if (!fs.existsSync(reportDir)) fs.mkdirSync(reportDir, { recursive: true });
-	const html = createReportHTML(await copyImagesToReport(failures, reportDir, configRoot));
-	const outputPath = path.join(reportDir, "index.html");
-	await fs.promises.writeFile(outputPath, html, "utf-8");
-	console.log(`\n📊 Image diff report: ${outputPath}`);
-	if (autoOpen) exec(`${process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open"} "${outputPath}"`);
-}
-/** Copy images to report dir, preserving directory structure relative to configRoot */
-async function copyImagesToReport(failures, reportDir, configRoot) {
-	return Promise.all(failures.map(async (failure) => {
-		const copiedPaths = await copyImageSet(failure.paths, reportDir, configRoot);
-		return {
-			...failure,
-			paths: copiedPaths
-		};
-	}));
-}
-async function copyImageSet(paths, reportDir, configRoot) {
-	const copy = async (sourcePath) => {
-		const relativePath = path.relative(configRoot, sourcePath);
-		const destPath = path.join(reportDir, relativePath);
-		const destDir = path.dirname(destPath);
-		if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
-		await fs.promises.copyFile(sourcePath, destPath);
-		return relativePath;
-	};
-	return {
-		reference: await copy(paths.reference),
-		actual: await copy(paths.actual),
-		diff: await copy(paths.diff)
-	};
-}
-function createReportHTML(failures) {
-	const timestamp = (/* @__PURE__ */ new Date()).toLocaleString();
-	const totalFailures = failures.length;
-	const rows = failures.map((failure) => {
-		const { testName, snapshotName, comparison, paths } = failure;
-		const { mismatchedPixels, mismatchedPixelRatio } = comparison;
-		return `
-      <tr>
-        <td class="test-name">
-          <strong>${escapeHtml(testName)}</strong><br>
-          <code>${escapeHtml(snapshotName)}</code>
-        </td>
-        <td class="image-cell">
-          <a href="${paths.reference}" target="_blank">
-            <img src="${paths.reference}" alt="Expected" />
-          </a>
-          <div class="label">Expected</div>
-        </td>
-        <td class="image-cell">
-          <a href="${paths.actual}" target="_blank">
-            <img src="${paths.actual}" alt="Actual" />
-          </a>
-          <div class="label">Actual</div>
-        </td>
-        <td class="image-cell">
-          <a href="${paths.diff}" target="_blank">
-            <img src="${paths.diff}" alt="Diff" />
-          </a>
-          <div class="label">Diff</div>
-        </td>
-        <td class="stats">
-          <div><strong>${mismatchedPixels}</strong> pixels</div>
-          <div><strong>${(mismatchedPixelRatio * 100).toFixed(2)}%</strong></div>
-        </td>
-      </tr>
-    `;
-	}).join("\n");
-	return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Image Snapshot Failures - ${totalFailures} failed</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      padding: 20px;
-      background: #f5f5f5;
-    }
-    header {
-      background: white;
-      padding: 20px;
-      border-radius: 8px;
-      margin-bottom: 20px;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    h1 {
-      color: #d73027;
-      margin-bottom: 10px;
-    }
-    .meta {
-      color: #666;
-      font-size: 14px;
-    }
-    .update-hint {
-      background: #fff3cd;
-      border: 1px solid #ffc107;
-      border-radius: 4px;
-      padding: 12px;
-      margin: 15px 0;
-    }
-    .update-hint code {
-      background: #f8f9fa;
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-family: 'Monaco', 'Courier New', monospace;
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      background: white;
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }
-    th, td {
-      padding: 15px;
-      text-align: left;
-      border-bottom: 1px solid #e0e0e0;
-    }
-    th {
-      background: #f8f9fa;
-      font-weight: 600;
-      color: #333;
-      text-align: center;
-    }
-    tr:last-child td {
-      border-bottom: none;
-    }
-    tr:hover {
-      background: #fafafa;
-    }
-    .test-name {
-      min-width: 200px;
-      vertical-align: top;
-    }
-    .test-name strong {
-      color: #333;
-    }
-    .test-name code {
-      color: #666;
-      font-size: 12px;
-      background: #f5f5f5;
-      padding: 2px 6px;
-      border-radius: 3px;
-    }
-    .image-cell {
-      text-align: center;
-      vertical-align: top;
-      width: 25%;
-    }
-    .image-cell a {
-      display: block;
-      text-decoration: none;
-    }
-    .image-cell img {
-      max-width: 100%;
-      height: auto;
-      max-height: 300px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      cursor: pointer;
-      transition: transform 0.2s;
-    }
-    .image-cell img:hover {
-      transform: scale(1.02);
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    }
-    .label {
-      margin-top: 8px;
-      font-size: 12px;
-      color: #666;
-      font-weight: 500;
-    }
-    .stats {
-      text-align: center;
-      color: #d73027;
-      font-size: 14px;
-      vertical-align: top;
-    }
-    .stats div {
-      margin: 5px 0;
-    }
-    footer {
-      margin-top: 20px;
-      text-align: center;
-      color: #999;
-      font-size: 12px;
-    }
-  </style>
-</head>
-<body>
-  <header>
-    <h1>🔴 Image Snapshot Failures</h1>
-    <div class="meta">
-      <strong>${totalFailures}</strong> test${totalFailures === 1 ? "" : "s"} failed •
-      Generated: ${escapeHtml(timestamp)}
-    </div>
-    <div class="update-hint">
-      💡 <strong>To update snapshots:</strong> Run <code>pnpm test -- -u</code> or <code>vitest -u</code>
-    </div>
-  </header>
-
-  <table>
-    <thead>
-      <tr>
-        <th>Test</th>
-        <th>Expected</th>
-        <th>Actual</th>
-        <th>Diff</th>
-        <th>Mismatch</th>
-      </tr>
-    </thead>
-    <tbody>
-      ${rows}
-    </tbody>
-  </table>
-
-  <footer>
-    Click images to view full size •
-    Diff images highlight mismatched pixels in yellow/red
-  </footer>
-</body>
-</html>`;
-}
-function escapeHtml(text) {
-	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-}
-
-//#endregion
 //#region src/ImageComparison.ts
 async function compareImages(reference, actual, options = {}) {
 	const { threshold = .1, allowedPixelRatio = 0, allowedPixels = 0, includeAA = true } = options;
@@ -436,63 +198,5 @@ async function missingSnapshot(manager, actualBuffer, snapshotName) {
 	};
 }
 
-//#endregion
-//#region src/ImageSnapshotReporter.ts
-/** Vitest reporter that generates HTML diff reports for image snapshot failures */
-var ImageSnapshotReporter = class {
-	failures = [];
-	vitest;
-	reportPath;
-	autoOpen;
-	constructor(options = {}) {
-		this.reportPath = options.reportPath;
-		this.autoOpen = options.autoOpen ?? process.env.IMAGE_DIFF_AUTO_OPEN === "true";
-	}
-	onInit(vitest) {
-		this.vitest = vitest;
-	}
-	onTestCaseResult(testCase) {
-		const result = testCase.result();
-		if (result?.state !== "failed") return;
-		const meta = testCase.meta();
-		if (!meta.imageSnapshotFailure) return;
-		const error = result.errors?.[0];
-		const failure = captureFailure(testCase, meta.imageSnapshotFailure, error?.message || "");
-		this.failures.push(failure);
-	}
-	async onTestRunEnd() {
-		if (this.failures.length === 0) return;
-		const reportDir = this.resolveReportDir();
-		await generateDiffReport(this.failures, {
-			autoOpen: this.autoOpen,
-			reportDir,
-			configRoot: this.vitest.config.root
-		});
-	}
-	resolveReportDir() {
-		const configRoot = this.vitest.config.root;
-		if (!this.reportPath) return path.join(configRoot, "__image_diff_report__");
-		return path.isAbsolute(this.reportPath) ? this.reportPath : path.join(configRoot, this.reportPath);
-	}
-};
-function captureFailure(testCase, data, message) {
-	const snapshotName = data.actualPath.match(/([^/]+)\.png$/)?.[1] || "unknown";
-	return {
-		testName: testCase.fullName || testCase.name,
-		snapshotName,
-		comparison: {
-			pass: false,
-			message,
-			mismatchedPixels: data.mismatchedPixels,
-			mismatchedPixelRatio: data.mismatchedPixelRatio
-		},
-		paths: {
-			reference: data.expectedPath,
-			actual: data.actualPath,
-			diff: data.diffPath
-		}
-	};
-}
-
 //#endregion
 export { ImageSnapshotManager, ImageSnapshotReporter, compareImages, generateDiffReport, imageMatcher, pngBuffer };

package/dist/reporter.d.ts

@@ -0,0 +1,2 @@
+import { t as ImageSnapshotReporter } from "./ImageSnapshotReporter-C3C7yfn1.js";
+export { ImageSnapshotReporter as default };

package/dist/reporter.js

@@ -0,0 +1,7 @@
+import { t as ImageSnapshotReporter } from "./ImageSnapshotReporter-D1-9tyxx.js";
+
+//#region src/reporter.ts
+var reporter_default = ImageSnapshotReporter;
+
+//#endregion
+export { reporter_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-image-snapshot",
-  "version": "0.6.22",
+  "version": "0.6.23",
   "type": "module",
   "files": [
     "dist",

package/src/DiffReport.ts

@@ -34,9 +34,7 @@ export async function generateDiffReport(
 
   if (failures.length === 0) return;
 
-  if (!fs.existsSync(reportDir)) {
-    fs.mkdirSync(reportDir, { recursive: true });
-  }
+  await fs.promises.mkdir(reportDir, { recursive: true });
 
   const withCopiedImages = await copyImagesToReport(
     failures,
@@ -84,24 +82,28 @@ async function copyImageSet(
   reportDir: string,
   configRoot: string,
 ): Promise<{ reference: string; actual: string; diff: string }> {
-  const copy = async (sourcePath: string): Promise<string> => {
-    const relativePath = path.relative(configRoot, sourcePath);
-    const destPath = path.join(reportDir, relativePath);
-    const destDir = path.dirname(destPath);
+  return {
+    reference: await copyImage(paths.reference, reportDir, configRoot),
+    actual: await copyImage(paths.actual, reportDir, configRoot),
+    diff: await copyImage(paths.diff, reportDir, configRoot),
+  };
+}
 
-    if (!fs.existsSync(destDir)) {
-      fs.mkdirSync(destDir, { recursive: true });
-    }
+/** Copy single image to report dir, preserving directory structure relative to configRoot */
+async function copyImage(
+  sourcePath: string,
+  reportDir: string,
+  configRoot: string,
+): Promise<string> {
+  if (!fs.existsSync(sourcePath)) return "";
 
-    await fs.promises.copyFile(sourcePath, destPath);
-    return relativePath;
-  };
+  const relativePath = path.relative(configRoot, sourcePath);
+  const destPath = path.join(reportDir, relativePath);
+  const destDir = path.dirname(destPath);
 
-  return {
-    reference: await copy(paths.reference),
-    actual: await copy(paths.actual),
-    diff: await copy(paths.diff),
-  };
+  await fs.promises.mkdir(destDir, { recursive: true });
+  await fs.promises.copyFile(sourcePath, destPath);
+  return relativePath;
 }
 
 function createReportHTML(failures: ImageSnapshotFailure[]): string {
@@ -132,10 +134,7 @@ function createReportHTML(failures: ImageSnapshotFailure[]): string {
           <div class="label">Actual</div>
         </td>
         <td class="image-cell">
-          <a href="${paths.diff}" target="_blank">
-            <img src="${paths.diff}" alt="Diff" />
-          </a>
-          <div class="label">Diff</div>
+          ${diffCellHTML(paths.diff)}
         </td>
         <td class="stats">
           <div><strong>${mismatchedPixels}</strong> pixels</div>
@@ -254,6 +253,13 @@ function createReportHTML(failures: ImageSnapshotFailure[]): string {
       color: #666;
       font-weight: 500;
     }
+    .no-diff {
+      color: #999;
+      font-size: 13px;
+      font-style: italic;
+      padding: 20px;
+      text-align: center;
+    }
     .stats {
       text-align: center;
       color: #d73027;
@@ -314,3 +320,13 @@ function escapeHtml(text: string): string {
     .replace(/"/g, "&quot;")
     .replace(/'/g, "&#039;");
 }
+
+function diffCellHTML(diffPath: string): string {
+  if (!diffPath) {
+    return `<div class="no-diff">No diff image<br/>(dimension mismatch)</div>`;
+  }
+  return `<a href="${diffPath}" target="_blank">
+            <img src="${diffPath}" alt="Diff" />
+          </a>
+          <div class="label">Diff</div>`;
+}

package/src/test/fixtures/failing-snapshot/__image_diff_report__/index.html

@@ -106,6 +106,13 @@
       color: #666;
       font-weight: 500;
     }
+    .no-diff {
+      color: #999;
+      font-size: 13px;
+      font-style: italic;
+      padding: 20px;
+      text-align: center;
+    }
     .stats {
       text-align: center;
       color: #d73027;
@@ -128,7 +135,7 @@
     <h1>🔴 Image Snapshot Failures</h1>
     <div class="meta">
       <strong>1</strong> test failed •
-      Generated: 10/30/2025, 8:09:42 AM
+      Generated: 11/4/2025, 4:23:56 PM
     </div>
     <div class="update-hint">
       💡 <strong>To update snapshots:</strong> Run <code>pnpm test -- -u</code> or <code>vitest -u</code>
@@ -153,20 +160,20 @@
           <code>red-square</code>
         </td>
         <td class="image-cell">
-          <a href="packages/vitest-image-snapshot/src/test/fixtures/failing-snapshot/__image_snapshots__/red-square.png" target="_blank">
-            <img src="packages/vitest-image-snapshot/src/test/fixtures/failing-snapshot/__image_snapshots__/red-square.png" alt="Expected" />
+          <a href="src/test/fixtures/failing-snapshot/__image_snapshots__/red-square.png" target="_blank">
+            <img src="src/test/fixtures/failing-snapshot/__image_snapshots__/red-square.png" alt="Expected" />
           </a>
           <div class="label">Expected</div>
         </td>
         <td class="image-cell">
-          <a href="packages/vitest-image-snapshot/src/test/fixtures/failing-snapshot/__image_actual__/red-square.png" target="_blank">
-            <img src="packages/vitest-image-snapshot/src/test/fixtures/failing-snapshot/__image_actual__/red-square.png" alt="Actual" />
+          <a href="src/test/fixtures/failing-snapshot/__image_actual__/red-square.png" target="_blank">
+            <img src="src/test/fixtures/failing-snapshot/__image_actual__/red-square.png" alt="Actual" />
           </a>
           <div class="label">Actual</div>
         </td>
         <td class="image-cell">
-          <a href="packages/vitest-image-snapshot/src/test/fixtures/failing-snapshot/__image_diffs__/red-square.png" target="_blank">
-            <img src="packages/vitest-image-snapshot/src/test/fixtures/failing-snapshot/__image_diffs__/red-square.png" alt="Diff" />
+          <a href="src/test/fixtures/failing-snapshot/__image_diffs__/red-square.png" target="_blank">
+            <img src="src/test/fixtures/failing-snapshot/__image_diffs__/red-square.png" alt="Diff" />
           </a>
           <div class="label">Diff</div>
         </td>