React TypeScript项目中Jest测试Swiper v10出现模块导入语法错误

问题描述 #

开发React TypeScript应用时，Swiper v10本身运行正常，但编写单元测试时Jest抛出SyntaxError: Cannot use import statement outside a module错误。

已尝试的配置 #

Jest配置 #

module.exports = {
  preset: 'ts-jest',
  verbose: true,
  setupFilesAfterEnv: ['<rootDir>src/setupTests.ts'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  moduleDirectories: ['node_modules', 'src'],
  rootDir: './',
  modulePaths: ['<rootDir>'],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy',

    'swiper/css': 'swiper/swiper.min.css',
  },
  testEnvironment: 'jsdom',
  transform: {
    '\\.[jt]sx?$': 'babel-jest',
    '^.+\\.(ts|tsx)?$': 'ts-jest',
  },
};

Babel配置 #

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
};

解决方案 #

Swiper v10采用ESM模块格式，而Jest默认仅处理CommonJS模块，导致无法识别ESM的import语句。需要调整Jest配置，让它转译Swiper及其依赖模块：

• 添加transformIgnorePatterns配置：默认Jest不会转译node_modules内的模块，需把Swiper及其核心依赖加入转译白名单：

  transformIgnorePatterns: [
    'node_modules/(?!swiper|ssr-window|dom7)',
  ]
  

  这三个包（swiper、ssr-window、dom7）均为ESM格式，必须一起转译才能解决语法错误。

• 简化moduleNameMapper的CSS映射：移除针对swiper/css的单独映射，统一用identity-obj-proxy处理所有样式文件即可，避免引入未转译的CSS模块：

  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy',
  }
  

• 统一transform规则：原配置中重复定义了JS/TS文件的转译器，可能引发冲突，调整为分类型处理：

  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
  }
  

最终Jest配置示例 #

module.exports = {
  preset: 'ts-jest',
  verbose: true,
  setupFilesAfterEnv: ['<rootDir>src/setupTests.ts'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  moduleDirectories: ['node_modules', 'src'],
  rootDir: './',
  modulePaths: ['<rootDir>'],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy',
  },
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  transformIgnorePatterns: [
    'node_modules/(?!swiper|ssr-window|dom7)',
  ],
};

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