React+TypeScript项目中Jest无法识别Craco配置的路径别名求助

问题描述 #

使用TypeScript开发React应用，通过Craco配置路径别名后应用运行正常，但Jest无法识别这些别名，运行craco test时报错找不到模块，ts-node也存在相同问题。

相关配置文件 #

jest.config.js

const config = {  
  setupFilesAfterEnv: ['<rootDir>/config/jest/setup.ts'], 
  moduleNameMapper: {
    '^@shared(.*)': ['<rootDir>/src/shared$1'],
}

craco.config.js

const path = require('path');

module.exports = {
  jest: {
    configure: {
      preset: 'ts-jest',
    },
  },
  webpack: {
    alias: {
      '@shared/*': path.resolve(__dirname, 'src/shared/*')
    }

ts.config.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "es2015",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["src/shared/*"],
    }
  },
  "include": [
    "src"
  ]
}

报错信息 #

Cannot find module '@shared/component/loading' from 'src/features/item/details/index.tsx'
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)

解决方案 #

1. 修正Craco配置，统一Jest别名映射

修改craco.config.js，将Jest的别名配置整合到Craco配置中，同时修正webpack别名的写法：

const path = require('path');

module.exports = {
  jest: {
    configure: {
      preset: 'ts-jest',
      setupFilesAfterEnv: ['<rootDir>/config/jest/setup.ts'],
      // 精准匹配@shared/xxx格式的路径，映射到对应文件
      moduleNameMapper: {
        '^@shared/(.*)$': '<rootDir>/src/shared/$1',
      },
    },
  },
  webpack: {
    alias: {
      // Webpack别名无需加*，@shared会自动匹配所有子路径
      '@shared': path.resolve(__dirname, 'src/shared'),
    },
  },
};

2. 修复tsconfig.json的语法问题

移除paths配置中多余的尾逗号，避免TS语法报错：

{
  "compilerOptions": {
    // 其他配置保持不变
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["src/shared/*"]
    }
  },
  "include": ["src"]
}

3. 解决ts-node无法识别别名的问题

安装tsconfig-paths依赖，让ts-node能够读取tsconfig中的路径配置：

npm install --save-dev tsconfig-paths

在package.json的scripts中添加ts-node的启动脚本：

"scripts": {
  // 保留原有脚本，新增以下内容
  "ts-node": "ts-node -r tsconfig-paths/register"
}

之后使用npm run ts-node xxx.ts运行脚本即可识别路径别名。

4. 验证配置

运行craco test，此时Jest应该能正确解析@shared/component/loading这类路径。

关键说明 #

• Craco会接管Jest配置，单独的jest.config.js可能被覆盖，推荐将Jest配置统一放在craco.config.js的jest.configure中。
• Jest的moduleNameMapper正则需要精准匹配导入路径，确保所有以@shared/开头的路径都能正确映射。
• ts-node本身不支持tsconfig的paths配置，必须借助tsconfig-paths实现路径解析。

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