从Jest迁移至Vitest后字体文件Mock失败，报SyntaxError错误

问题描述 #

将项目测试框架从Jest迁移到Vitest后，生成组件快照时出现字体、图标等资源文件无法Mock的问题。此前在Jest中通过moduleNameMapper处理这类文件完全正常，但迁移到Vitest后该方法失效。尝试在vite.config.ts中配置test.alias来Mock资源文件，配置代码如下：

test: {
 alias: [
      {
        find: /.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/,
        replacement: resolve('./mocks/test-mock.js'),
      },
      {
        find: /.+\\.(css|scss|less|sass)$/,
        replacement: resolve('identity-obj-proxy'),
      },
   ],
}

运行测试时抛出错误：

'SyntaxError: Invalid or unexpected token' ❯ Object.<anonymous> node_modules/some-material-ui-library/styles/defaultTheme/fonts.js

可行解决方案 #

1. 使用Vitest全局Mock替代alias配置 #

Vitest的alias在处理第三方库引入的资源时优先级不足，建议直接通过全局Mock规则拦截资源文件：

• 在项目根目录创建__mocks__/fileMock.js：

export default 'test-file-stub';

• 在vite.config.ts中启用mockReset并指定初始化文件：

import { defineConfig } from 'vite';

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

• 在vitest.setup.ts中注册Mock规则：

import { vi } from 'vitest';

// Mock所有资源文件
vi.mock(/\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$/, () => ({
  default: 'test-file-stub',
}));

// Mock样式文件
vi.mock(/\.(css|scss|less|sass)$/, () => ({
  default: {},
}));

2. 单独Mock报错的第三方库模块 #

报错来自第三方库的fonts.js文件，说明该模块直接引入字体的方式未被拦截，可单独Mock这个模块：
在vitest.setup.ts中添加：

vi.mock('some-material-ui-library/styles/defaultTheme/fonts.js', () => ({
  default: {},
}));

3. 修复alias配置的匹配规则 #

原alias的正则转义和路径配置可能存在问题，调整如下：

test: {
  alias: [
    {
      find: /\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/,
      replacement: './mocks/test-mock.js', // 改用相对路径，去掉resolve
    },
    {
      find: /\.(css|scss|less|sass)$/,
      replacement: 'identity-obj-proxy',
    },
  ],
}

同时确保test-mock.js采用ES模块导出：

export default 'mock-resource';

内容的提问来源于stack exchange，提问作者Максим Грушецкий