fix(snapshot): support mix of normal/with placeholders snapshots (#4118)

Author: RobertPechaCZ

packages/snapshot/src/port/inlineSnapshot.ts

@@ -96,12 +96,17 @@ function prepareSnapString(snap: string, source: string, index: number) {
 
 const startRegex = /(?:toMatchInlineSnapshot|toThrowErrorMatchingInlineSnapshot)\s*\(\s*(?:\/\*[\S\s]*\*\/\s*|\/\/.*\s+)*\s*[\w_$]*(['"`\)])/m
 export function replaceInlineSnap(code: string, s: MagicString, index: number, newSnap: string) {
-  const startMatch = startRegex.exec(code.slice(index))
-  if (!startMatch)
+  const codeStartingAtIndex = code.slice(index)
+
+  const startMatch = startRegex.exec(codeStartingAtIndex)
+
+  const firstKeywordMatch = /toMatchInlineSnapshot|toThrowErrorMatchingInlineSnapshot/.exec(codeStartingAtIndex)
+
+  if (!startMatch || startMatch.index !== firstKeywordMatch?.index)
     return replaceObjectSnap(code, s, index, newSnap)
 
   const quote = startMatch[1]
-  const startIndex = index + startMatch.index! + startMatch[0].length
+  const startIndex = index + startMatch.index + startMatch[0].length
   const snapString = prepareSnapString(newSnap, code, index)
 
   if (quote === ')') {

test/snapshots/test-update/snapshots-inline-js.test.js

@@ -34,9 +34,35 @@ describe('snapshots with properties', () => {
   })
 
   test('with snapshot', () => {
-    expect({ foo: 'bar' }).toMatchInlineSnapshot({ foo: expect.any(String) }, `
+    expect({ first: { second: { foo: 'bar' } } }).toMatchInlineSnapshot({ first: { second: { foo: expect.any(String) } } }, `
       Object {
-        "foo": Any<String>,
+        "first": Object {
+          "second": Object {
+            "foo": Any<String>,
+          },
+        },
+      }
+    `)
+  })
+
+  test('mixed with and without snapshot', () => {
+    expect({ first: { second: { foo: 'bar' } } }).toMatchInlineSnapshot({ first: { second: { foo: expect.any(String) } } }, `
+      Object {
+        "first": Object {
+          "second": Object {
+            "foo": Any<String>,
+          },
+        },
+      }
+    `)
+
+    expect({ first: { second: { foo: 'zed' } } }).toMatchInlineSnapshot(`
+      Object {
+        "first": Object {
+          "second": Object {
+            "foo": "zed",
+          },
+        },
       }
     `)
   })

test/snapshots/test/__snapshots__/shapshots.test.ts.snap

@@ -37,9 +37,35 @@ describe('snapshots with properties', () => {
   })
 
   test('with snapshot', () => {
-    expect({ foo: 'bar' }).toMatchInlineSnapshot({ foo: expect.any(String) }, \`
+    expect({ first: { second: { foo: 'bar' } } }).toMatchInlineSnapshot({ first: { second: { foo: expect.any(String) } } }, \`
       Object {
-        \\"foo\\": Any<String>,
+        \\"first\\": Object {
+          \\"second\\": Object {
+            \\"foo\\": Any<String>,
+          },
+        },
+      }
+    \`)
+  })
+
+  test('mixed with and without snapshot', () => {
+    expect({ first: { second: { foo: 'bar' } } }).toMatchInlineSnapshot({ first: { second: { foo: expect.any(String) } } }, \`
+      Object {
+        \\"first\\": Object {
+          \\"second\\": Object {
+            \\"foo\\": Any<String>,
+          },
+        },
+      }
+    \`)
+
+    expect({ first: { second: { foo: 'zed' } } }).toMatchInlineSnapshot(\`
+      Object {
+        \\"first\\": Object {
+          \\"second\\": Object {
+            \\"foo\\": \\"zed\\",
+          },
+        },
       }
     \`)
   })

test/snapshots/tools/inline-test-template.js

@@ -18,6 +18,34 @@ describe('snapshots with properties', () => {
   })
 
   test('with snapshot', () => {
-    expect({ foo: 'bar' }).toMatchInlineSnapshot({ foo: expect.any(String) }, '')
+    expect({ first: { second: { foo: 'bar' } } }).toMatchInlineSnapshot({ first: { second: { foo: expect.any(String) } } }, `
+      Object {
+        "first": Object {
+          "wrong": Any<String>,
+          "second": null,
+        }
+      }
+    `)
+  })
+
+  test('mixed with and without snapshot', () => {
+    expect({ first: { second: { foo: 'bar' } } }).toMatchInlineSnapshot({ first: { second: { foo: expect.any(String) } } }, `
+      Object {
+        "first": Object {
+          "wrong": Any<String>,
+          "second": null,
+        }
+      }
+    `)
+
+    expect({ first: { second: { foo: 'zed' } } }).toMatchInlineSnapshot(`
+      Object {
+        "first": Object {
+          "second": {
+            "foo": "zed"
+          }
+        }
+      }
+    `)
   })
 })