Vite+React+TypeScript项目Jest路径导入报错求助

你遇到的Cannot find module '@/components/items/card.tsx'错误，核心原因是Jest没有配置Vite项目中使用的@路径别名——Vite和TypeScript通过tsconfig.json的paths规则识别@指向src目录，但Jest需要单独配置这个映射逻辑。

解决步骤： #

1. 确认TypeScript的路径别名配置
   先检查项目根目录的tsconfig.json，确保已正确配置@别名：

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["src/*"]
       }
       // 其他编译配置...
     }
   }
   

2. 修改Jest配置文件添加别名映射
   在jest.config.ts的moduleNameMapper中新增@的映射规则，让Jest把@/xxx解析为项目根目录下的src/xxx：

   export default {
       rootDir: ".",
       roots: ["./src"],
       testEnvironment: "jsdom",
       transform: {
         "^.+\\.tsx?$": "ts-jest",
       },
       moduleNameMapper: {
         "^@/(.*)$": "<rootDir>/src/$1", // 新增该行映射规则
         "\\.(gif|ttf|eot|svg|png|jpg)$": "<rootDir>/test/__mocks__/fileMock.js",
         "\\.(css|less|sass|scss)$": "identity-obj-proxy",
       }
   };
   

3. 验证配置生效
   重新运行测试命令，Jest即可正确识别@开头的导入路径。

额外说明： #

• 你测试文件中导入App的相对路径../App是正确的，无需修改。
• 确保ts-jest版本与项目TypeScript版本兼容，避免版本不匹配引发的解析异常。

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