React项目从JavaScript迁移到TypeScript时Jest出现找不到模块报错

• 检查Jest配置的模块扩展名声明
  你当前的jest.config中未配置moduleFileExtensions字段，Jest默认只会识别js/jsx/json/node后缀的文件，无法识别.tsx类型的组件，需要在jest.config中添加配置：

  module.exports = {
    preset: 'ts-jest',
    transform: {
      '^.+\\.(ts|tsx)?$': 'ts-jest',
      "^.+\\.(js|jsx)$": "babel-jest",
    },
    // 新增以下配置
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
  }
  

• 取消tsconfig中include字段的注释
  你当前tsconfig的include配置是被注释状态，ts-jest无法正确匹配项目范围内的ts/tsx文件，取消注释即可：

  {
    "compilerOptions": {/* 原有配置保持不变 */},
    "include": ["src/**/*"], // 取消此处注释
    "exclude": ["./cypress/**/*", "./coverage/**/*", "node_modules"]
  }
  

• 检查导入路径的大小写完全匹配
  Node环境下Jest对路径大小写敏感，而webpack运行时可能默认不区分大小写，导致项目能正常运行但测试报错。请核对报错的导入路径和实际文件路径的大小写完全一致，比如目录名keyboardInput是否有大小写拼写差异、文件名GeneralFieldInput大小写是否匹配。

• 检查测试工具版本兼容性
  你当前依赖的babel-jest版本为23.x，ts-jest版本为27.x，二者大版本差异过大存在兼容问题，建议将两个依赖的大版本升级到一致（比如都升级到27.x），避免转换逻辑冲突。

• 检查是否存在同名旧文件
  请确认原GeneralFieldInput的JS版本文件已经删除，避免同名文件导致Jest加载优先级异常。

• 可选：配置Jest模块查找目录
  如果项目中大量使用相对路径导入，可在jest.config中添加moduleDirectories配置简化模块查找逻辑：

  module.exports = {
    // 原有配置保持不变
    moduleDirectories: ['node_modules', 'src']
  }
  

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