使用jest命令运行测试报错，Mobx项目App.tsx路径配置失效求解决

我为 MobX 项目配置了以下 Jest 相关依赖：

"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"jest-circus": "^29.3.1",
"jest-resolve": "^29.3.1",
"jest-watch-typeahead": "^2.2.1",

MobX 相关依赖版本：

"mobx": "5.13.0",
"mobx-react": "5.4.4",
"mobx-react-devtools": "6.0.3",
"mobx-react-lite": "1.4.1",
"mobx-react-router": "4.0.7",
"mobx-utils": "5.4.1",

执行jest命令运行默认测试时出现报错，核心报错为：Cannot find module '@/components/Layout' from 'src/App.tsx'，配置 Jest 后 App.tsx 中的别名路径无法被正常识别。

Jest 不会自动读取项目tsconfig.json或jsconfig.json里配置的路径别名（比如常用的@/），测试执行时无法解析这类别名对应的实际文件路径，因此抛出模块找不到的错误。

1. 同步路径配置到 Jest #

首先确认项目tsconfig.json（或jsconfig.json）中已配置路径别名，示例配置如下：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

在 Jest 配置文件（jest.config.js或jest.config.ts）中添加moduleNameMapper字段，将别名映射到实际文件路径：

module.exports = {
  // 保留原有其他配置
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    // 匹配@/开头的路径，映射到src目录下对应文件
    '^@/(.*)$': '<rootDir>/src/$1'
  }
};

2. TypeScript 项目额外配置（可选） #

如果是 TypeScript 项目，建议配合ts-jest预设，确保 Jest 正确处理 TypeScript 语法和路径：

• 安装依赖：npm install ts-jest --save-dev
• 在 Jest 配置中添加preset字段：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
};

3. Babel 环境下的补充配置（可选） #

若项目使用babel-jest编译代码，需安装babel-plugin-module-resolver插件处理别名：

• 安装插件：npm install babel-plugin-module-resolver --save-dev
• 在babel.config.js中配置插件：

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@': './src'
        }
      }
    ]
  ]
};

完成以上配置后，重新执行jest命令，路径别名即可被正确解析，测试可正常运行。

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