fix(snapshot): fix flagging obsolete snapshots for snapshot properties mismatch (#9986)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: hi-ogawa

packages/snapshot/src/client.ts

@@ -50,6 +50,14 @@ interface AssertOptions {
   rawSnapshot?: RawSnapshotInfo
 }
 
+/** Same shape as expect.extend custom matcher result (SyncExpectationResult from @vitest/expect) */
+export interface MatchResult {
+  pass: boolean
+  message: () => string
+  actual?: unknown
+  expected?: unknown
+}
+
 export interface SnapshotClientOptions {
   isEqual?: (received: unknown, expected: unknown) => boolean
 }
@@ -99,7 +107,7 @@ export class SnapshotClient {
     return state
   }
 
-  assert(options: AssertOptions): void {
+  match(options: AssertOptions): MatchResult {
     const {
       filepath,
       name,
@@ -119,37 +127,44 @@ export class SnapshotClient {
     }
 
     const snapshotState = this.getSnapshotState(filepath)
+    const testName = [name, ...(message ? [message] : [])].join(' > ')
+
+    // Probe first so we can mark as checked even on early return
+    const expectedSnapshot = snapshotState.probeExpectedSnapshot({
+      testName,
+      testId,
+      isInline,
+      inlineSnapshot,
+    })
 
     if (typeof properties === 'object') {
       if (typeof received !== 'object' || !received) {
+        expectedSnapshot.markAsChecked()
         throw new Error(
           'Received value must be an object when the matcher has properties',
         )
       }
 
+      let propertiesPass: boolean
       try {
-        const pass = this.options.isEqual?.(received, properties) ?? false
-        // const pass = equals(received, properties, [iterableEquality, subsetEquality])
-        if (!pass) {
-          throw createMismatchError(
-            'Snapshot properties mismatched',
-            snapshotState.expand,
-            received,
-            properties,
-          )
-        }
-        else {
-          received = deepMergeSnapshot(received, properties)
-        }
+        propertiesPass = this.options.isEqual?.(received, properties) ?? false
       }
-      catch (err: any) {
-        err.message = errorMessage || 'Snapshot mismatched'
+      catch (err) {
+        expectedSnapshot.markAsChecked()
         throw err
       }
+      if (!propertiesPass) {
+        expectedSnapshot.markAsChecked()
+        return {
+          pass: false,
+          message: () => errorMessage || 'Snapshot properties mismatched',
+          actual: received,
+          expected: properties,
+        }
+      }
+      received = deepMergeSnapshot(received, properties)
     }
 
-    const testName = [name, ...(message ? [message] : [])].join(' > ')
-
     const { actual, expected, key, pass } = snapshotState.match({
       testId,
       testName,
@@ -160,12 +175,23 @@ export class SnapshotClient {
       rawSnapshot,
     })
 
-    if (!pass) {
+    return {
+      pass,
+      message: () => `Snapshot \`${key || 'unknown'}\` mismatched`,
+      actual: rawSnapshot ? actual : actual?.trim(),
+      expected: rawSnapshot ? expected : expected?.trim(),
+    }
+  }
+
+  assert(options: AssertOptions): void {
+    const result = this.match(options)
+    if (!result.pass) {
+      const snapshotState = this.getSnapshotState(options.filepath)
       throw createMismatchError(
-        `Snapshot \`${key || 'unknown'}\` mismatched`,
+        result.message(),
         snapshotState.expand,
-        rawSnapshot ? actual : actual?.trim(),
-        rawSnapshot ? expected : expected?.trim(),
+        result.actual,
+        result.expected,
       )
     }
   }

packages/snapshot/src/index.ts

@@ -1,4 +1,5 @@
 export { SnapshotClient } from './client'
+export type { MatchResult } from './client'
 
 export { stripSnapshotIndentation } from './port/inlineSnapshot'
 export { addSerializer, getSerializers } from './port/plugins'

packages/snapshot/src/port/state.ts

@@ -267,6 +267,24 @@ export default class SnapshotState {
     }
   }
 
+  probeExpectedSnapshot(
+    options: Pick<SnapshotMatchOptions, 'testName' | 'testId' | 'isInline' | 'inlineSnapshot'>,
+  ): {
+    data?: string
+    markAsChecked: () => void
+  } {
+    const count = this._counters.get(options.testName) + 1
+    const key = testNameToKey(options.testName, count)
+    return {
+      data: options?.isInline ? options.inlineSnapshot : this._snapshotData[key],
+      markAsChecked: () => {
+        this._counters.increment(options.testName)
+        this._testIdToKeys.get(options.testId).push(key)
+        this._uncheckedKeys.delete(key)
+      },
+    }
+  }
+
   match({
     testId,
     testName,

test/snapshots/test/fixtures/properties/.gitignore

@@ -0,0 +1 @@
+__snapshots__

test/snapshots/test/fixtures/properties/basic.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "vitest";
+
+test("file", () => {
+  expect({ name: "alice", age: 30 }).toMatchSnapshot({ age: expect.any(Number) });
+});
+
+test("file asymmetric", () => {
+  expect({ name: "bob", score: 95 }).toMatchSnapshot({
+    score: expect.toSatisfy(function lessThan100(n) {
+      return n < 100;
+    }),
+  });
+});
+
+test("file snapshot-only", () => {
+  expect({ name: "dave", age: 42 }).toMatchSnapshot({ age: expect.any(Number) });
+});
+
+// -- TEST INLINE START --
+test("inline", () => {
+  expect({ name: "carol", age: 25 }).toMatchInlineSnapshot({ age: expect.any(Number) }, `
+    Object {
+      "age": Any<Number>,
+      "name": "carol",
+    }
+  `);
+});
+// -- TEST INLINE END --