Vue/Vitest迁移后Jenkins中快照动态资源URL匹配问题排查

• 环境差异导致路径解析逻辑不同：本地运行测试时，Vitest会基于项目根目录解析import.meta.url，生成file:///src/...格式的路径；但在Jenkins的CI环境中，Vitest会基于节点的本地文件系统路径解析，生成带盘符的file:///C:/src/...路径——这个盘符路径在CI环境里是虚拟的，实际并不存在，和你本地生成的快照路径不匹配，导致测试失败。
• 快照基准不一致：本地生成的快照是基于相对路径的，而Jenkins测试时生成的实时路径是带盘符的绝对路径，两者对比自然无法通过。

1. 在测试环境中统一URL解析逻辑 #

在Vitest配置中添加setup文件，重写URL构造函数，强制测试环境下/src开头的资源返回统一的相对路径：
首先修改vitest.config.js：

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

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.js']
  }
})

然后新建vitest.setup.js：

global.URL = class extends URL {
  constructor(url, base) {
    // 针对/src开头的资源，强制用file:///作为基准路径
    if (url.startsWith('/src/')) {
      super(url, 'file:///')
    } else {
      super(url, base)
    }
  }
}

这样不管本地还是Jenkins，测试时生成的资源路径都会统一为file:///src/...，快照就能匹配上。

2. 替换资源导入方式，用BASE_URL统一路径 #

把组件里的new URL("/src/...", import.meta.url).href改成基于import.meta.env.BASE_URL的写法：

// 原代码
return new URL("/src/assets/xxx.png", import.meta.url).href

// 修改后代码
return new URL(`src/assets/xxx.png`, import.meta.env.BASE_URL).href

然后在vitest.config.js里统一设置BASE_URL：

export default defineConfig({
  test: {
    environment: 'jsdom',
    define: {
      'import.meta.env.BASE_URL': '"file:///"'
    }
  }
})

这种方式从根源上统一了资源路径的生成规则，避免环境差异带来的问题。

3. 同步Jenkins上的快照（不推荐） #

直接在Jenkins上重新运行测试，生成基于CI环境路径的快照，替换本地提交的旧快照。但这种方法治标不治本，后续本地修改组件后，快照会再次出现路径冲突，需要反复同步，维护成本较高。

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