vitest v3 throws with jest-image-snapshot.

[nnaku]

Describe the bug

Hello, it seem that recent changes in snapshot state #6817 broke some custom and third party snapshot matchers. For example using jest-image-snapshot with v3 results to error be thrown from vitest internals.

Opening issue because I was asked to do so. #6817 (comment)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: this.matched.total is not a function
 ❯ SnapshotState.pack node_modules/@vitest/snapshot/dist/index.js:2099:37
 ❯ processTicksAndRejections node:internal/process/task_queues:105:5
 ❯ SnapshotClient.finish node_modules/@vitest/snapshot/dist/index.js:2141:20
 ❯ VitestTestRunner.onAfterRunSuite node_modules/vitest/dist/runners.js:179:22
 ❯ runSuite node_modules/@vitest/runner/dist/index.js:1330:5
 ❯ runFiles node_modules/@vitest/runner/dist/index.js:1356:5
 ❯ startTests node_modules/@vitest/runner/dist/index.js:1366:3
 ❯ node_modules/vitest/dist/chunks/runBaseTests.Ba8jtu6O.js:129:11
 ❯ withEnv node_modules/vitest/dist/chunks/runBaseTests.Ba8jtu6O.js:92:5
 ❯ run node_modules/vitest/dist/chunks/runBaseTests.Ba8jtu6O.js:117:3

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯


 Test Files   (1)
      Tests   (1)
     Errors  1 error
   Start at  12:05:47
   Duration  23ms

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Reproduction

import { describe, expect, it } from "vitest";
import { toMatchImageSnapshot } from "jest-image-snapshot";
import fs from "fs";
expect.extend({ toMatchImageSnapshot });

describe("Test", () => {
  it("should match image snapshot", async () => {
    const image = fs.readFileSync("./image.png");
    expect(image).toMatchImageSnapshot();
  });
});

cant upload images to stackbliz 😢

System Info

System:
    OS: macOS 14.7.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 235.53 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v22.13.0/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm
    bun: 1.0.0 - ~/.bun/bin/bun
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 119.1.60.118
    Chrome: 132.0.6834.83
    Safari: 17.6
  npmPackages:
    vitest: ^3.0.2 => 3.0.2

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Hmm, interesting. I suppose the reason why they have SnapshotState.added/matched/... without private is because they are public SnapshotState API. I'm not sure if I can find an alternative, but it might be worth supporting new one and old one somehow.

[simonihmig]

I was running into the same, glad to see I am not the only one...

Putting a breakpoint before the line where this breaks revealed that this.matched was a string: '[object Object]1' in my case. And yes, that 1 is not a typo. As if this.matched was incremented by one somewhere, but it was already a stringified object at that point, so doing string concatenation instead. 🤔

[unional]

Just to share, if you consider migrating to use browser mode, I have storybook-addon-vis that replaces jest-image-snapshot.

[hi-ogawa]

Putting a breakpoint before the line where this breaks revealed that this.matched was a string: '[object Object]1' in my case.

Vitest's SnapshotState.matched is now object, which was originally a number. jest-image-snapshot does matched + 1 and that probably ends up with '[object Object]1'.

vitest/packages/snapshot/src/port/state.ts

Line 66 in 3604f2e

private matched = new CounterMap<string>()

https://github.com/americanexpress/jest-image-snapshot/blob/ff773940e8244203220a2db8ce8a719958c82a8e/src/index.js#L61

> ({ some: 'object' }) + 1
'[object Object]1'

[hi-ogawa]

I attempted a bit of hack on Vitest side which might make it compatible with jest-image-snapshot. I'm not sure we go with this though, I'm interested to know if this works for any of you. Please feel free to try out pkg.pr.new from #7390 (comment)

[wallynm]

Sorry, but how i can test with pkg.pr.new?
Do i need to add each pacakges? Or just this is fine?
pkg.pr.new/@vitest/snapshot@7390

[hi-ogawa]

Sorry, but how i can test with pkg.pr.new? Do i need to add each pacakges? Or just this is fine? pkg.pr.new/@vitest/snapshot@7390

@wallynm You only need to replace related packages you have in projects. Thus normally having "vitest": "https://pkg.pr.new/vitest@7390" in package json should work.

[vinnymac]

I attempted a bit of hack on Vitest side which might make it compatible with jest-image-snapshot. I'm not sure we go with this though, I'm interested to know if this works for any of you. Please feel free to try out pkg.pr.new from #7390 (comment)

Your hack worked for my needs, all of my tests passed after I installed https://pkg.pr.new/vitest@7390