如何配置Vitest使快照__file字段基于src目录而非绝对路径

可以通过配置Vitest的快照序列化逻辑，将__file字段的绝对路径替换为相对于项目src目录的路径，确保不同开发者运行测试时快照内容一致，具体有两种实现方案：

方案一：直接在Vitest配置中自定义序列化逻辑 #

在项目根目录的vitest.config.js（或.ts）文件中添加如下配置：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  test: {
    snapshotFormat: {
      printBasicPrototype: false,
      // 自定义序列化函数，替换__file的绝对路径为相对src的路径
      serialize: (val, config, indentation, depth, refs, printer) => {
        if (val && typeof val === 'object' && '__file' in val) {
          // 获取src目录的绝对路径
          const srcAbsolutePath = path.resolve(__dirname, 'src')
          // 将__file的绝对路径转换为相对src的路径
          val.__file = path.relative(srcAbsolutePath, val.__file)
        }
        // 调用默认序列化逻辑处理其余内容
        return printer(val, config, indentation, depth, refs)
      }
    }
  }
})

方案二：自定义Vue快照序列化器 #

如果项目使用jest-serializer-vue作为快照序列化器，可以通过自定义序列化器来处理路径：

1. 创建自定义序列化器文件，比如tests/serializers/vue-serializer.js：

const vueSerializer = require('jest-serializer-vue')
const path = require('path')

module.exports = {
  serialize(val, config, indentation, depth, refs, printer) {
    if (val && typeof val === 'object' && '__file' in val) {
      const srcAbsolutePath = path.resolve(__dirname, '../../src')
      val.__file = path.relative(srcAbsolutePath, val.__file)
    }
    return vueSerializer.serialize(val, config, indentation, depth, refs, printer)
  },
  test(val) {
    return vueSerializer.test(val)
  }
}

2. 在vitest.config.js中配置使用该自定义序列化器：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    snapshotSerializers: ['<rootDir>/tests/serializers/vue-serializer.js']
  }
})

配置完成后重新生成快照，__file字段会变为相对于src目录的路径，不同开发者本地运行测试时快照内容将保持一致。

内容的提问来源于stack exchange，提问作者basant