fix: compat for jest-image-snapshot (#7390)

Author: hi-ogawa

packages/snapshot/src/port/state.ts

@@ -62,12 +62,23 @@ export default class SnapshotState {
   private _snapshotFormat: PrettyFormatOptions
   private _environment: SnapshotEnvironment
   private _fileExists: boolean
-  private added = new CounterMap<string>()
-  private matched = new CounterMap<string>()
-  private unmatched = new CounterMap<string>()
-  private updated = new CounterMap<string>()
   expand: boolean
 
+  // getter/setter for jest-image-snapshot compat
+  // https://github.com/vitest-dev/vitest/issues/7322
+  private _added = new CounterMap<string>()
+  private _matched = new CounterMap<string>()
+  private _unmatched = new CounterMap<string>()
+  private _updated = new CounterMap<string>()
+  get added(): CounterMap<string> { return this._added }
+  set added(value: number) { this._added._total = value }
+  get matched(): CounterMap<string> { return this._matched }
+  set matched(value: number) { this._matched._total = value }
+  get unmatched(): CounterMap<string> { return this._unmatched }
+  set unmatched(value: number) { this._unmatched._total = value }
+  get updated(): CounterMap<string> { return this._updated }
+  set updated(value: number) { this._updated._total = value }
+
   private constructor(
     public testFilePath: string,
     public snapshotPath: string,

packages/snapshot/src/port/utils.ts

@@ -287,11 +287,28 @@ export class CounterMap<K> extends DefaultMap<K, number> {
     super(() => 0)
   }
 
+  // compat for jest-image-snapshot https://github.com/vitest-dev/vitest/issues/7322
+  // `valueOf` and `Snapshot.added` setter allows
+  //   snapshotState.added = snapshotState.added + 1
+  // to function as
+  //   snapshotState.added.total_ = snapshotState.added.total() + 1
+  _total: number | undefined
+
+  valueOf(): number {
+    return this._total = this.total()
+  }
+
   increment(key: K): void {
+    if (typeof this._total !== 'undefined') {
+      this._total++
+    }
     this.set(key, this.get(key) + 1)
   }
 
   total(): number {
+    if (typeof this._total !== 'undefined') {
+      return this._total
+    }
     let total = 0
     for (const x of this.values()) {
       total += x

pnpm-lock.yaml

@@ -14,5 +14,8 @@
   },
   "dependencies": {
     "vitest": "workspace:*"
+  },
+  "devDependencies": {
+    "jest-image-snapshot": "^6.4.0"
   }
 }

test/snapshots/package.json

@@ -0,0 +1,19 @@
+import { expect, it } from "vitest";
+import fs from "fs";
+
+// @ts-expect-error no type
+import { toMatchImageSnapshot } from "jest-image-snapshot";
+expect.extend({ toMatchImageSnapshot });
+
+declare module 'vitest' {
+  interface Assertion<T = any> {
+    toMatchImageSnapshot(): void
+  }
+}
+
+// pnpm -C test/snapshots test:fixtures --root test/fixtures/jest-image-snapshot
+
+it("toMatchImageSnapshot", async () => {
+  const file = new URL("./test.png", import.meta.url)
+  expect(fs.readFileSync(file)).toMatchImageSnapshot();
+});

test/snapshots/test/fixtures/jest-image-snapshot/__image_snapshots__/basic-test-ts-to-match-image-snapshot-1-snap.png

@@ -0,0 +1,62 @@
+import fs from 'node:fs'
+import { join } from 'node:path'
+import { expect, test } from 'vitest'
+import { runVitest } from '../../test-utils'
+
+test('jest-image-sapshot', async () => {
+  // cleanup snapshot
+  const root = join(import.meta.dirname, 'fixtures/jest-image-snapshot')
+  fs.rmSync(join(root, '__image_snapshots__'), { recursive: true, force: true })
+
+  // write snapshot
+  let vitest = await runVitest({
+    root,
+    update: true,
+  })
+  expect(vitest.stderr).toBe('')
+  expect(vitest.ctx?.snapshot.summary).toMatchInlineSnapshot(`
+    Object {
+      "added": 1,
+      "didUpdate": true,
+      "failure": false,
+      "filesAdded": 1,
+      "filesRemoved": 0,
+      "filesRemovedList": Array [],
+      "filesUnmatched": 0,
+      "filesUpdated": 0,
+      "matched": 0,
+      "total": 1,
+      "unchecked": 0,
+      "uncheckedKeysByFile": Array [],
+      "unmatched": 0,
+      "updated": 0,
+    }
+  `)
+  expect(fs.existsSync(join(root, '__image_snapshots__/basic-test-ts-to-match-image-snapshot-1-snap.png'))).toBe(true)
+
+  // match existing snapshot
+  vitest = await runVitest({
+    root,
+    update: false,
+  })
+  expect(vitest.stderr).toBe('')
+  expect(vitest.ctx?.snapshot.summary).toMatchInlineSnapshot(`
+    Object {
+      "added": 0,
+      "didUpdate": false,
+      "failure": false,
+      "filesAdded": 0,
+      "filesRemoved": 0,
+      "filesRemovedList": Array [],
+      "filesUnmatched": 0,
+      "filesUpdated": 0,
+      "matched": 1,
+      "total": 1,
+      "unchecked": 0,
+      "uncheckedKeysByFile": Array [],
+      "unmatched": 0,
+      "updated": 0,
+    }
+  `)
+  expect(fs.existsSync(join(root, '__image_snapshots__/basic-test-ts-to-match-image-snapshot-1-snap.png'))).toBe(true)
+})