VueJS 3/Vitest测试组件调用后端时URL解析报错排查

核心原因：happy-dom的URL解析bug #

你调试发现的happy-dom的URL.ts文件中，解析端口的正则表达式错误地捕获了带冒号的端口字符串（如:8080），而非纯数字的8080，这是触发所有报错的根源。

因为你使用vitest --dom命令时，vitest默认采用happy-dom作为DOM模拟环境，它的URL解析逻辑存在缺陷：提取端口时未正确剥离前缀的冒号:，导致返回的端口值是带冒号的无效字符串。

为什么Axios和Fetch都会报错 #

• Axios：它会对端口值做整数范围校验（要求在0-65536之间），但带冒号的:8080无法转换为有效整数，直接抛出RangeError。
• Fetch API：happy-dom模拟的Fetch实现依赖自身的URL解析结果，带冒号的端口不符合URL规范中的端口格式要求，因此抛出InvalidArgumentError。

浏览器正常运行的原因 #

真实浏览器的URL解析引擎遵循标准规范，会自动剥离冒号提取纯数字端口，所以不会出现这类解析错误。

可行的解决办法 #

• Mock请求（推荐）：测试阶段无需发起真实网络请求，用vitest的mock功能模拟Axios响应，绕开URL解析逻辑：

  vi.mock('axios', () => ({
    default: {
      get: vi.fn().mockResolvedValue({ data: [{ id: 1, name: '测试应用' }] })
    }
  }))
  

• 升级happy-dom版本：检查vitest依赖的happy-dom是否为旧版本，升级到最新稳定版可能已修复该解析bug。
• 切换测试环境到jsdom：如果升级无效，可修改vitest配置，改用jsdom作为DOM环境：

  // vitest.config.ts
  import { defineConfig } from 'vitest/config'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    test: {
      environment: 'jsdom', // 替换为jsdom
      globals: true
    }
  })
  

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