test(react): add codePath snapshot serializer

Author: IGassmann

packages/@livestore/react/src/__snapshots__/useClientDocument.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`useClientDocument > otel > should update the data based on component ke
     {
       "_name": "client-session-sync-processor:pull",
       "attributes": {
-        "code.stacktrace": "at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:297:14",
+        "code.stacktrace": "at <REPO_DIR>/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:<LINE>:<COLUMN>",
         "span.label": "⚠︎ Interrupted",
         "status.interrupted": true,
       },
@@ -263,7 +263,7 @@ exports[`useClientDocument > otel > should update the data based on component ke
     {
       "_name": "client-session-sync-processor:pull",
       "attributes": {
-        "code.stacktrace": "at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:297:14",
+        "code.stacktrace": "at <REPO_DIR>/packages/@livestore/common/src/sync/ClientSessionSyncProcessor.ts:<LINE>:<COLUMN>",
         "span.label": "⚠︎ Interrupted",
         "status.interrupted": true,
       },

packages/@livestore/react/src/__tests__/serializers/codePath.js

@@ -0,0 +1,42 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+/**
+ * Find the root directory of a Git repo by walking up from a start directory.
+ *
+ * @param {string} [startDir=process.cwd()] – the directory from which to start the search
+ * @returns {string|null} – the path to the repo root, or null if none is found
+ */
+const findRepoRootDir = (startDir = process.cwd()) => {
+  let dir = path.resolve(startDir)
+
+  while (dir !== path.dirname(dir)) {
+    const gitPath = path.join(dir, '.git')
+
+    if (fs.existsSync(gitPath) && fs.statSync(gitPath).isDirectory()) {
+      return dir
+    }
+
+    dir = path.dirname(dir)
+  }
+
+  return null
+}
+
+const repoRootDir = findRepoRootDir()
+if (!repoRootDir) throw new Error('Could not find the root directory of the Git repository.')
+const lineColumnRegex = /(?<fileExt>\.\w+):\d+:\d+/g
+
+/**
+ * Vitest {@link https://vitest.dev/guide/snapshot.html#custom-serializer | custom snapshot serializer} that replaces user-specific parts of a code path with placeholders.
+ */
+export default {
+  test: (value) => typeof value === 'string' && value.includes(repoRootDir) && lineColumnRegex.test(value),
+
+  serialize: (value, config, indentation, depth, refs, printer) => {
+    const sanitized = value
+      .replaceAll(repoRootDir, '<REPO_DIR>')
+      .replaceAll(lineColumnRegex, '$<fileExt>:<LINE>:<COLUMN>')
+    return printer(sanitized, config, indentation, depth, refs)
+  },
+}

packages/@livestore/react/vitest.config.js

@@ -4,6 +4,7 @@ export default defineConfig({
   test: {
     // Needed for React hook tests
     environment: 'jsdom',
+    snapshotSerializers: ['./src/__tests__/serializers/codePath.js'],
   },
   esbuild: {
     // TODO remove once `using` keyword supported OOTB with Vite https://github.com/vitejs/vite/issues/15464#issuecomment-1872485703