React自定义样板配置Jest时路径别名无法识别找不到模块问题求解

开发者阿泽

2026-9-27

问题根因

你在Webpack中通过tsconfig-paths-webpack-plugin实现了tsconfig路径别名的自动识别，但Jest默认不会同步读取tsconfig的paths配置，无法识别你定义的短路径别名，因此出现模块找不到的报错。
报错中提示「Jest was able to find: 'utils/constants.ts'」是因为Jest扫描到了src目录下的对应文件，但无法通过你写的别名映射到该文件，并不是扩展名或者moduleFileExtensions配置的问题。

解决方案

方案1：手动配置Jest别名映射（适合别名数量少的场景）

直接修改jest.config.js，在moduleNameMapper中新增别名对应的路径映射即可：

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  moduleNameMapper: {
    '\\.(css|less|scss|sss|styl)$': '<rootDir>/node_modules/identity-obj-proxy',
    // 新增路径别名映射规则
    '^components/(.*)$': '<rootDir>/src/components/$1',
    '^styles/(.*)$': '<rootDir>/src/styles/$1',
    '^utils/(.*)$': '<rootDir>/src/utils/$1'
  }
};

配置中^代表匹配路径开头，避免误匹配其他嵌套路径，$1对应别名中*匹配的路径片段。

方案2：自动同步tsconfig别名（适合别名多、后续频繁调整的场景）

通过工具自动读取tsconfig的paths生成Jest的映射规则，不需要手动维护两份配置：

安装依赖

npm install tsconfig-paths-jest --save-dev

修改jest.config.js

const tsconfig = require('./tsconfig.json');
const moduleNameMapper = require('tsconfig-paths-jest')(tsconfig);

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  moduleNameMapper: {
    '\\.(css|less|scss|sss|styl)$': '<rootDir>/node_modules/identity-obj-proxy',
    ...moduleNameMapper
  }
};