如何在Vite+React+TypeScript项目中配置Jest识别资源文件？

我用Vite创建了React+TypeScript应用，默认资源文件放在src/assets/react.svg目录下。配置Jest进行测试时，运行测试出现报错：

could not locate module ./assets/react.svg mapped as myname/tests/mocks/fileMock.js

相关目录结构 #

src/_tests_/_mocks_/fileMock.js
src/_tests_/_mocks_/styleMock.js
src/assets
App.css
App.tsx
Index.tsx
vite.environment.d.ts
jest.config.js
tsconfig.json
vite.config.ts

原jest.config.ts配置 #

export default {
    preset: 'ts-jest',
    //testEnvironment: 'jest-environment-jsdom',
    testEnvironment: 'jsdom',
    transform: {
        "^.+\\.tsx?$": "ts-jest" 
    // process `*.tsx` files with `ts-jest`
    },
    moduleNameMapper: {
        '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/_tests_/__ mocks __/fileMock.js',
    },
}

解决步骤 #

• 修正路径映射错误
  你的moduleNameMapper里存在两个问题：

  1. 路径未包含src目录，<rootDir>指向项目根目录，而mock文件实际在src/_tests_/_mocks_下，所以路径要改为<rootDir>/src/_tests_/_mocks_/fileMock.js
  2. 配置里的__ mocks __有多余空格，要和实际目录名_mocks_保持一致

• 确保fileMock.js内容正确
  打开src/_tests_/_mocks_/fileMock.js，写入以下内容：

  module.exports = 'test-file-stub';
  

• 添加样式文件mock（可选）
  为避免后续测试中样式文件导入报错，在moduleNameMapper里补充样式文件的映射：

  '\\.(css|less|scss|sass)$': '<rootDir>/src/_tests_/_mocks_/styleMock.js'
  

  对应的styleMock.js内容：

  module.exports = {};
  

最终jest.config.ts配置 #

export default {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    transform: {
        "^.+\\.tsx?$": "ts-jest" 
    },
    moduleNameMapper: {
        '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/src/_tests_/_mocks_/fileMock.js',
        '\\.(css|less|scss|sass)$': '<rootDir>/src/_tests_/_mocks_/styleMock.js'
    },
}

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