feat!(snapshot): make snapshots more visually pleasing (vitest-dev#3961)

LorenzoBloedow · Dec 19, 2023 · 37c79b2 · 37c79b2
1 parent 6b21ecc
commit 37c79b2
Show file tree

Hide file tree

Showing 27 changed files with 578 additions and 541 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,6 +5,9 @@
     // prefer global Buffer to not initialize the whole module
     "n/prefer-global/buffer": "off",
     "@typescript-eslint/no-invalid-this": "off",
+    "@typescript-eslint/quotes": ["error", "single", {
+      "allowTemplateLiterals": true
+    }],
     "no-restricted-imports": [
       "error",
       {

diff --git a/examples/basic/test/__snapshots__/suite.test.ts.snap b/examples/basic/test/__snapshots__/suite.test.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`suite name > snapshot 1`] = `
 {

diff --git a/examples/mocks/test/error-mock.spec.ts b/examples/mocks/test/error-mock.spec.ts
@@ -4,5 +4,5 @@ vi.mock('../src/default', () => {
 
 test('when using top level variable, gives helpful message', async () => {
   await expect(() => import('../src/default').then(m => m.default)).rejects
-    .toThrowErrorMatchingInlineSnapshot('"[vitest] There was an error when mocking a module. If you are using \\"vi.mock\\" factory, make sure there are no top level variables inside, since this call is hoisted to top of the file. Read more: https://vitest.dev/api/vi.html#vi-mock"')
+    .toThrowErrorMatchingInlineSnapshot('"[vitest] There was an error when mocking a module. If you are using "vi.mock" factory, make sure there are no top level variables inside, since this call is hoisted to top of the file. Read more: https://vitest.dev/api/vi.html#vi-mock"')
 })
diff --git a/examples/react/test/__snapshots__/basic.test.tsx.snap b/examples/react/test/__snapshots__/basic.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Link changes the class when hovered 1`] = `
 <a

diff --git a/examples/vitesse/test/__snapshots__/basic.test.ts.snap b/examples/vitesse/test/__snapshots__/basic.test.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`mount component 1`] = `
 <div

diff --git a/examples/vue-jsx/test/__snapshots__/case.test.ts.snap b/examples/vue-jsx/test/__snapshots__/case.test.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mount component 1`] = `"<a-select-stub value=\\"test\\"></a-select-stub>"`;
+exports[`mount component 1`] = `"<a-select-stub value="test"></a-select-stub>"`;
diff --git a/examples/vue/test/imports.test.ts b/examples/vue/test/imports.test.ts
@@ -5,7 +5,6 @@ describe('import vue components', () => {
   })
 
   test('template string imports as expected', async () => {
-    // eslint-disable-next-line @typescript-eslint/quotes
     const cmp = await import(`../components/Hello.vue`)
     expect(cmp).toBeDefined()
   })

diff --git a/examples/vue2/test/__snapshots__/basic.test.ts.snap b/examples/vue2/test/__snapshots__/basic.test.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`mount component 1`] = `
 "<div>

diff --git a/examples/vue2/test/__snapshots__/script-setup.test.ts.snap b/examples/vue2/test/__snapshots__/script-setup.test.ts.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`mount component 1`] = `
 "<div>

diff --git a/packages/snapshot/src/port/inlineSnapshot.ts b/packages/snapshot/src/port/inlineSnapshot.ts
@@ -87,11 +87,10 @@ function prepareSnapString(snap: string, source: string, index: number) {
     .split(/\n/g)
 
   const isOneline = lines.length <= 1
-  const quote = isOneline ? '\'' : '`'
+  const quote = '`'
   if (isOneline)
-    return `'${lines.join('\n').replace(/'/g, '\\\'')}'`
-  else
-    return `${quote}\n${lines.map(i => i ? indentNext + i : '').join('\n').replace(/`/g, '\\`').replace(/\${/g, '\\${')}\n${indent}${quote}`
+    return `${quote}${lines.join('\n').replace(/`/g, '\\`').replace(/\${/g, '\\${')}${quote}`
+  return `${quote}\n${lines.map(i => i ? indentNext + i : '').join('\n').replace(/`/g, '\\`').replace(/\${/g, '\\${')}\n${indent}${quote}`
 }
 
 const startRegex = /(?:toMatchInlineSnapshot|toThrowErrorMatchingInlineSnapshot)\s*\(\s*(?:\/\*[\S\s]*\*\/\s*|\/\/.*\s+)*\s*[\w_$]*(['"`\)])/m

diff --git a/packages/snapshot/src/port/state.ts b/packages/snapshot/src/port/state.ts
@@ -84,6 +84,7 @@ export default class SnapshotState {
     this.updated = 0
     this._snapshotFormat = {
       printBasicPrototype: false,
+      escapeString: false,
       ...options.snapshotFormat,
     }
     this._environment = options.snapshotEnvironment

diff --git a/test/browser/test/mocked.test.ts b/test/browser/test/mocked.test.ts
@@ -25,6 +25,5 @@ test('imports are still the same', async () => {
   // @ts-expect-error typescript resolution
   await expect(import('../src/calculator')).resolves.toBe(calculatorModule)
   // @ts-expect-error typescript resolution
-  // eslint-disable-next-line @typescript-eslint/quotes
   await expect(import(`../src/calculator`)).resolves.toBe(calculatorModule)
 })
diff --git a/test/core/test/__snapshots__/mocked.test.ts.snap b/test/core/test/__snapshots__/mocked.test.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`mocked function which fails on toReturnWith > just one call 1`] = `
-"expected \\"spy\\" to return with: 2 at least once
+"expected "spy" to return with: 2 at least once
 
 Received: 
 
@@ -16,7 +16,7 @@ Number of calls: 1
 `;
 
 exports[`mocked function which fails on toReturnWith > multi calls 1`] = `
-"expected \\"spy\\" to return with: 2 at least once
+"expected "spy" to return with: 2 at least once
 
 Received: 
 
@@ -41,29 +41,29 @@ Number of calls: 3
 `;
 
 exports[`mocked function which fails on toReturnWith > oject type 1`] = `
-"expected \\"spy\\" to return with: { a: '4' } at least once
+"expected "spy" to return with: { a: '4' } at least once
 
 Received: 
 
   1st spy call return:
 
   Object {
--   \\"a\\": \\"4\\",
-+   \\"a\\": \\"1\\",
+-   "a": "4",
++   "a": "1",
   }
 
   2nd spy call return:
 
   Object {
--   \\"a\\": \\"4\\",
-+   \\"a\\": \\"1\\",
+-   "a": "4",
++   "a": "1",
   }
 
   3rd spy call return:
 
   Object {
--   \\"a\\": \\"4\\",
-+   \\"a\\": \\"1\\",
+-   "a": "4",
++   "a": "1",
   }
 
 
@@ -72,7 +72,7 @@ Number of calls: 3
 `;
 
 exports[`mocked function which fails on toReturnWith > zero call 1`] = `
-"expected \\"spy\\" to return with: 2 at least once
+"expected "spy" to return with: 2 at least once
 
 Received: 
 

diff --git a/test/core/test/__snapshots__/snapshot.test.ts.snap b/test/core/test/__snapshots__/snapshot.test.ts.snap
@@ -46,6 +46,20 @@ exports[`renders mock snapshot 2`] = `
 }
 `;
 
+exports[`single line snapshot 1`] = `"some string"`;
+
+exports[`single line snapshot 2`] = `"some "string""`;
+
+exports[`single line snapshot 3`] = `"some "string"`;
+
+exports[`single line snapshot 4`] = `"som\`e\` string"`;
+
+exports[`single line snapshot 5`] = `"some string\`"`;
+
+exports[`single line snapshot 6`] = `"some string'"`;
+
+exports[`single line snapshot 7`] = `"some 'string'"`;
+
 exports[`throwing 1`] = `"omega"`;
 
 exports[`throwing 2`] = `"omega"`;

diff --git a/test/core/test/diff.test.ts b/test/core/test/diff.test.ts
@@ -15,9 +15,9 @@ test('displays object diff', () => {
     + Received
 
       Object {
-        \\"a\\": 1,
-    -   \\"b\\": 2,
-    +   \\"b\\": 3,
+        "a": 1,
+    -   "b": 2,
+    +   "b": 3,
       }
     "
   `)