fix(snapshot): strip snapshot annotation when matching inline snapshots

Author: christian-bromann

package-lock.json

@@ -58,7 +58,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@vitest/snapshot": "^3.2.1",
+    "@vitest/snapshot": "^3.2.4",
     "expect": "^30.0.0",
     "jest-matcher-utils": "^30.0.0",
     "lodash.isequal": "^4.5.0"
@@ -68,18 +68,18 @@
     "@types/jest": "^30.0.0",
     "@types/lodash.isequal": "^4.5.8",
     "@types/node": "^24.0.3",
-    "@vitest/coverage-v8": "^3.2.1",
+    "@vitest/coverage-v8": "^3.2.4",
     "@wdio/eslint": "^0.1.1",
     "@wdio/types": "^9.15.0",
     "c8": "^10.1.3",
-    "eslint": "^9.28.0",
+    "eslint": "^9.29.0",
     "husky": "^9.1.7",
     "npm-run-all2": "^8.0.4",
     "release-it": "^19.0.3",
     "rimraf": "^6.0.1",
     "shelljs": "^0.10.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.1",
+    "vitest": "^3.2.4",
     "webdriverio": "^9.15.0"
   },
   "peerDependencies": {

package.json

@@ -2,6 +2,7 @@ import path from 'node:path'
 import type { AssertionError } from 'node:assert'
 
 import { expect } from 'expect'
+import { stripSnapshotIndentation } from '@vitest/snapshot'
 import { SnapshotService } from '../snapshot.js'
 
 interface InlineSnapshotOptions {
@@ -146,13 +147,27 @@ export function toMatchInlineSnapshot(received: unknown, inlineSnapshot: string,
                 ...stack.slice(3)
             ].join('\n')
         }
-        error.stack = error.stack?.split('\n').filter((line) => (
+        const trace = error.stack?.split('\n').filter((line) => (
             line.includes('__INLINE_SNAPSHOT__') ||
             !(
                 line.includes('__EXTERNAL_MATCHER_TRAP__') ||
                 line.includes(`expect-webdriverio${path.sep}lib${path.sep}matchers${path.sep}snapshot.js:`)
             )
-        )).join('\n')
+        )) || []
+
+        /**
+         * tweak the stack trace to enable inline snapshot testing within this projects
+         * unit tests
+         */
+        if (process.env.WDIO_INTERNAL_TEST) {
+            trace.splice(2, 1)
+        }
+
+        if (inlineSnapshot) {
+            inlineSnapshot = stripSnapshotIndentation(inlineSnapshot)
+        }
+
+        error.stack = trace.join('\n')
         return toMatchSnapshotHelper(received, message, {
             inlineSnapshot,
             error

src/matchers/snapshot.ts

@@ -9,10 +9,12 @@ import type { Services, Frameworks } from '@wdio/types'
  */
 let service: SnapshotService
 
+export type SnapshotFormat = SnapshotStateOptions['snapshotFormat']
 type ResolveSnapshotPathFunction = (path: string, extension: string) => string
 interface SnapshotServiceArgs {
     updateState?: SnapshotUpdateState
     resolveSnapshotPath?: ResolveSnapshotPathFunction
+    snapshotFormat?: SnapshotFormat
 }
 
 class WebdriverIOSnapshotEnvironment extends NodeSnapshotEnvironment {
@@ -54,9 +56,18 @@ export class SnapshotService implements Services.ServiceInstance {
             : options?.updateState
                 ? options.updateState
                 : 'new'
+
+        // Only set snapshotFormat if user provides explicit options
+        const snapshotFormatConfig = options?.snapshotFormat ? {
+            printBasicPrototype: false,
+            escapeString: false,
+            ...options.snapshotFormat
+        } : undefined
+
         this.#options = {
             updateSnapshot,
-            snapshotEnvironment: new WebdriverIOSnapshotEnvironment(options?.resolveSnapshotPath)
+            snapshotEnvironment: new WebdriverIOSnapshotEnvironment(options?.resolveSnapshotPath),
+            ...(snapshotFormatConfig && { snapshotFormat: snapshotFormatConfig })
         } as const
     }
 

src/snapshot.ts

@@ -7,6 +7,7 @@ import type { Frameworks } from '@wdio/types'
 import { expect as expectExport, SnapshotService } from '../src/index.js'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const __filename = path.basename(fileURLToPath(import.meta.url))
 
 const service = SnapshotService.initiate({
     resolveSnapshotPath: (path, extension) => path + extension
@@ -16,21 +17,28 @@ test('supports snapshot testing', async () => {
     await service.beforeTest({
         title: 'test',
         parent: 'parent',
-        file: `${__dirname}/file`,
+        file: path.join(__dirname, __filename),
     } as Frameworks.Test)
 
+    process.env.WDIO_INTERNAL_TEST = 'true'
+
     const exp = expectExport
     expect(exp).toBeDefined()
     expect(exp({}).toMatchSnapshot).toBeDefined()
     expect(exp({}).toMatchInlineSnapshot).toBeDefined()
     await exp({ a: 'a' }).toMatchSnapshot()
-    /**
-     * doesn't work without running in WebdriverIO test runner context
-     */
-    // await exp({ a: 'a' }).toMatchInlineSnapshot()
+    await exp({ deep: { nested: { object: 'value' } } }).toMatchInlineSnapshot(`
+      {
+        "deep": {
+          "nested": {
+            "object": "value",
+          },
+        },
+      }
+    `)
     await service.after()
 
-    const expectedSnapfileExist = await fs.access(path.resolve(__dirname, 'file.snap'))
+    const expectedSnapfileExist = await fs.access(path.resolve(__dirname, 'snapshot.test.ts.snap'))
         .then(() => true, () => false)
     expect(expectedSnapfileExist).toBe(true)
 })
@@ -54,4 +62,3 @@ test('supports cucumber snapshot testing', async () => {
         .then(() => true, () => false)
     expect(expectedSnapfileExist).toBe(true)
 })
-

test/file.snap

@@ -0,0 +1,17 @@
+// Snapshot v1
+
+exports[`parent > test 1`] = `
+{
+  "a": "a",
+}
+`;
+
+exports[`parent > test 2`] = `
+{
+  "deep": {
+    "nested": {
+      "object": "value",
+    },
+  },
+}
+`;