Jest测试文件中绝对导入模块无法识别问题排查

一共四个核心问题导致绝对导入失效、模块找不到报错：

• 文件名大小写不匹配：测试代码导入路径里的组件名拼写为Searchbox（b为小写），和实际文件名SearchBox.tsx（B为大写）不一致，且tsconfig开启了forceConsistentCasingInFileNames强制大小写校验，直接触发模块识别失败。
• 配置文件名拼写不匹配：tsconfig.json里写的继承路径是./tsconfig.paths.json，但实际存放路径规则的文件名为tsconfig.path.json（少了末尾的s），TypeScript 根本读取不到你配置的路径映射规则。平时npm run start/build不报错是因为react-scripts内置的webpack默认支持src目录作为模块根目录，不依赖tsconfig的paths配置，但你单独运行全局Jest时不会继承这个逻辑。
• 路径配置冗余冲突：同时配置了moduleDirectories的src目录解析、moduleNameMapper的src别名，TS侧又同时设置了baseUrl: "src"和src/*路径映射，多套规则叠加反而打乱了模块解析优先级。
• Jest配置缺失：现有配置没有加TS/TSX转译规则、没有配置jsdom测试环境，就算解决了导入问题，后续运行React组件测试也会直接报错。

1. 修正基础拼写错误 #

• 统一路径配置文件名：要么把实际的路径配置文件重命名为tsconfig.paths.json，和tsconfig.json里的extends字段保持一致；要么把tsconfig.json里的extends值改为./tsconfig.path.json，两边文件名、大小写完全匹配即可。
• 修正测试文件的导入语句，保证组件名大小写和文件名完全对齐：

// SearchBox的B为大写，和文件名SearchBox.tsx完全对应
import SearchBox from "src/components/SearchBox";

2. 简化TS路径配置，去掉冗余规则 #

二选一配置即可，不要混写：

• 方案A（更简洁，推荐）：去掉重复的paths映射，直接用baseUrl指定src为模块根目录，后续导入不需要写src前缀，直接写import xxx from "components/xxx"即可。修改路径配置文件内容为：

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

• 方案B（保留src前缀写法）：把baseUrl设为项目根目录，保留src路径映射，配置内容为：

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

3. 对齐Jest配置和TS解析规则 #

• 如果选了方案A，直接把jest.config.ts简化为以下内容，去掉冗余的别名配置：

export default {
  roots: ["<rootDir>/src"],
  moduleFileExtensions: ["js", "ts", "tsx"],
  moduleDirectories: ["node_modules", "<rootDir>/src"],
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(ts|tsx)$": ["babel-jest", { presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"] }]
  }
};

• 如果选了方案B，就保留src别名映射，给正则加首尾锚点避免误匹配，配置内容为：

export default {
  roots: ["<rootDir>/src"],
  moduleFileExtensions: ["js", "ts", "tsx"],
  moduleDirectories: ["node_modules"],
  moduleNameMapper: {
    "^src/(.*)$": "<rootDir>/src/$1"
  },
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.(ts|tsx)$": ["babel-jest", { presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"] }]
  }
};

4. 验证生效 #

删除项目下的node_modules/.cache缓存目录，重新执行npm run test即可正常识别模块。

额外提示：你当前安装的Jest 28和项目里的react-scripts 2.1.3版本跨度极大，后续大概率会出现ESM/CJS模块兼容冲突，如果修复后仍有转译类报错，可以直接把package.json里的test脚本改回react-scripts test，删掉自定义的jest.config.ts，用CRA内置的Jest能力即可自动识别tsconfig路径规则，省去大量适配成本。

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