React+TypeScript项目Jest测试时出现import模块语法错误

针对你遇到的SyntaxError: Cannot use import statement outside a module错误（仅在使用axios、query-string的组件测试时出现），可以按以下步骤排查修复：

• 调整transformIgnorePatterns，让ts-jest转译指定第三方库
  Jest默认会忽略node_modules目录下的文件转译，但部分第三方库（如axios、query-string）现在发布的是ES模块格式，需要让ts-jest处理它们。修改你的jest.config.ts：

  import { JestConfigWithTsJest } from 'ts-jest/dist/types'
  
  const options: JestConfigWithTsJest = {
      preset: 'ts-jest',
      rootDir: '../../',
      collectCoverage: false, // temporal
      coverageDirectory: 'coverage',
      testEnvironment: 'jsdom',
      collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
      setupFilesAfterEnv: ['<rootDir>/config/jest/jest.setup.ts'],
      coverageThreshold: {
          global: {
              lines: 90,
          },
      },
      // 修改此行，排除需要转译的库
      transformIgnorePatterns: ['<rootDir>/node_modules/(?!axios|query-string)'],
      // 显式指定transform规则（确保ts/tsx文件被ts-jest处理）
      transform: {
          '^.+\\.(ts|tsx)$': 'ts-jest',
      },
  }
  
  export default options
  

  这里的(?!axios|query-string)是负向预查语法，表示除了axios和query-string之外的node_modules内容都忽略转译，确保这两个库会被ts-jest转译为Jest能识别的格式。

• 检查package.json的type字段配置
  如果你的package.json中设置了"type": "module"，需要额外添加ES模块兼容配置到jest.config.ts：

  extensionsToTreatAsEsm: ['.ts', '.tsx'],
  moduleNameMapper: {
      '^(\\.{1,2}/.*)\\.js$': '$1',
  },
  

  同时确保你的tsconfig.json中对应配置：

  {
      "compilerOptions": {
          "module": "ESNext",
          "moduleResolution": "NodeNext"
      }
  }
  

• 清理Jest缓存后重新测试
  执行以下命令清除缓存，避免旧缓存影响：

  npx jest --clearCache
  npm test
  

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