测试SwiperJS组件时Jest抛出Unexpected token 'export'错误求助

问题原因 #

Jest默认忽略node_modules目录下文件的转译，但Swiper及部分关联依赖发布的是ES模块格式代码，Jest无法直接解析这类语法，因此抛出意外令牌错误。

解决方案 #

• 配置Jest转译Swiper相关包
  在Jest配置文件（如jest.config.js，或package.json的jest字段）中添加transformIgnorePatterns，指定让Jest对Swiper及其依赖进行转译：

  module.exports = {
    // 其他Jest配置项...
    transformIgnorePatterns: [
      '/node_modules/(?!swiper|ssr-window|dom7)/'
    ]
  };
  

• 确保Babel配置支持ES模块
  检查项目的Babel配置文件（babel.config.js或.babelrc），确认包含必要的预设：

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

• 处理CSS导入报错（可选）
  如果测试中出现CSS导入相关错误，可在Jest配置里添加moduleNameMapper来mock CSS文件：

  module.exports = {
    // 其他配置项...
    moduleNameMapper: {
      '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
    }
  };
  

  执行以下命令安装依赖：

  npm install identity-obj-proxy --save-dev
  

验证修改 #

重新运行测试用例：

npm test

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