Vite+TypeScript项目Jest测试套件运行失败：导入模块遇意外令牌

1. 修复ts-jest配置过时警告 #

旧版ts-jest的preset配置已被废弃，需更新jest.config.js中的transform配置：

• 先安装最新版ts-jest：

  npm install ts-jest@latest --save-dev
  

• 修改jest.config.js的transform字段，移除旧的preset: 'ts-jest'配置：

  module.exports = {
    // 保留其他原有配置
    transform: {
      '^.+\\.tsx?$': ['ts-jest', {
        // 项目用ES模块的话添加此配置
        useESM: true,
        // 指定项目的TypeScript配置文件路径
        tsconfig: '<rootDir>/tsconfig.json'
      }]
    }
  };
  

2. 解决字体文件（.woff2/.woff）解析错误 #

Jest无法直接解析非JS/TS资源文件，需通过mock处理：

• 在jest.config.js中添加moduleNameMapper配置：

  module.exports = {
    // 保留其他原有配置
    moduleNameMapper: {
      '\\.(woff2|woff)$': '<rootDir>/__mocks__/fileMock.js'
    }
  };
  

• 在项目根目录创建__mocks__/fileMock.js文件，内容如下：

  // CommonJS环境
  module.exports = 'test-font-stub';
  
  // 若项目为ES模块，改为：
  // export default 'test-font-stub';
  

• 若项目中存在样式文件导入字体的情况，需补充样式文件的mock：

  moduleNameMapper: {
    '\\.(woff2|woff)$': '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js'
  }
  

  对应的styleMock.js内容：

  module.exports = {};
  

3. 额外配置检查 #

• 确保tsconfig.json的compilerOptions与Jest兼容：
  • 若使用ES模块，设置module: 'ESNext'，同时在jest.config.js中添加extensionsToTreatAsEsm: ['.ts', '.tsx']
  • 若开启了isolatedModules，需在ts-jest配置中同步添加isolatedModules: true
• 若项目使用Babel，建议让.babelrc仅作用于Vite构建流程，Jest完全依赖ts-jest处理TypeScript，避免双重编译冲突

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