From 01e01bfcdccd37a6ea0a00507e839b92341c178e Mon Sep 17 00:00:00 2001
From: RobertPechaCZ <31454051+RobertPechaCZ@users.noreply.github.com>
Date: Thu, 14 Sep 2023 10:19:29 +0200
Subject: [PATCH] fix(snapshot): support mix of normal/with placeholders
 snapshots (#4118)

---
 packages/snapshot/src/port/inlineSnapshot.ts  | 11 +++++--
 .../test-update/snapshots-inline-js.test.js   | 30 +++++++++++++++++--
 .../test/__snapshots__/shapshots.test.ts.snap | 30 +++++++++++++++++--
 test/snapshots/tools/inline-test-template.js  | 30 ++++++++++++++++++-
 4 files changed, 93 insertions(+), 8 deletions(-)

diff --git a/packages/snapshot/src/port/inlineSnapshot.ts b/packages/snapshot/src/port/inlineSnapshot.ts
index 3e98dea188c5..1b9131a56601 100644
--- a/packages/snapshot/src/port/inlineSnapshot.ts
+++ b/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 === ')') {
diff --git a/test/snapshots/test-update/snapshots-inline-js.test.js b/test/snapshots/test-update/snapshots-inline-js.test.js
index 806e740dc692..0b2158f511aa 100644
--- a/test/snapshots/test-update/snapshots-inline-js.test.js
+++ b/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",
+          },
+        },
       }
     `)
   })
diff --git a/test/snapshots/test/__snapshots__/shapshots.test.ts.snap b/test/snapshots/test/__snapshots__/shapshots.test.ts.snap
index e5485a6b62a3..b03b83715dab 100644
--- a/test/snapshots/test/__snapshots__/shapshots.test.ts.snap
+++ b/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\\",
+          },
+        },
       }
     \`)
   })
diff --git a/test/snapshots/tools/inline-test-template.js b/test/snapshots/tools/inline-test-template.js
index f80e7918f3d8..f560531ac847 100644
--- a/test/snapshots/tools/inline-test-template.js
+++ b/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"
+          }
+        }
+      }
+    `)
   })
 })