从CRA+Jest迁移到Vite+Vitest时mock window.URL报错求助

问题根源 #

你mock window.URL.createObjectURL 时返回的字符串 "URL" 被Vite的资源解析机制误判为本地文件路径，导致测试环境尝试加载不存在的C:/code/project/URL文件，从而抛出错误。

解决方案 #

1. 修改mock返回值为完整HTTP URL

将mock的返回值从单纯的"URL"改为不会被解析为本地路径的完整HTTP地址，避免触发Vite的本地文件查找逻辑：

if (!window.URL?.createObjectURL) {
    if (!window.URL) {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        window.URL = {};
    }

    window.URL.createObjectURL = vi.fn().mockImplementation(() => {
        return "https://example.com/mock-blob-url"; // 用完整HTTP URL替代纯字符串
    });
}

2. 优化全局mock写法（更简洁规范）

推荐在Vitest的全局setup文件中统一配置mock，避免在每个测试文件重复编写：

• 创建vitest.setup.js文件：

// 保留原有window.URL的其他方法，仅覆盖需要mock的createObjectURL
vi.stubGlobal('URL', {
  ...window.URL,
  createObjectURL: vi.fn(() => 'https://example.com/mock-blob-url'),
});

• 在vitest.config.js中配置setup文件：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.js'],
    // 其他测试相关配置
  },
});

原理说明 #

Vite在处理资源引用时，会自动解析本地相对/绝对路径并尝试加载对应文件。当组件使用createObjectURL的返回值作为资源路径（比如图片src）时，单纯的"URL"会被识别为本地文件路径，触发不存在文件的加载错误。而完整的HTTP URL会被视为外部资源，不会触发本地文件解析流程。

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