如何使用Jest测试Swiper？项目运行正常但测试报找不到swiper/react模块

这个报错的核心原因是Swiper 8及以上版本默认以纯ES模块格式发布，而Jest默认不会转换node_modules目录下的ES模块，因此无法识别swiper/react这类非CommonJS格式的导入路径，可按以下步骤修复：

方案1：调整Jest模块转换配置 #

修改你的Jest配置（可在jest.config.js、jest.config.ts或者package.json的jest字段中配置）：

• 新增transformIgnorePatterns配置，将Swiper及其依赖加入转换白名单：

module.exports = {
  // 其余原有配置保持不变
  transformIgnorePatterns: [
    "node_modules/(?!(swiper|ssr-window|dom7)/)"
  ]
}

• 如果项目使用Create React App搭建且未暴露配置，可直接修改package.json中的test命令：

{
  "scripts": {
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(swiper|ssr-window|dom7)/)\""
  }
}

• 补充配置样式文件解析：因为Jest默认无法处理CSS文件，可安装identity-obj-proxy并新增moduleNameMapper配置：

npm i identity-obj-proxy -D

// jest配置中新增
moduleNameMapper: {
  "\\.(css)$": "identity-obj-proxy"
}

方案2：直接Mock Swiper组件（更适合不需要测试Swiper本身逻辑的场景） #

如果你的单测不需要验证Swiper的轮播、切换等自带功能，可直接在测试文件中Mock Swiper相关组件和样式，跳过模块解析：

// 在App.test.jsx顶部添加Mock逻辑
jest.mock('swiper/react', () => ({
  Swiper: ({ children }) => <div data-testid="swiper">{children}</div>,
  SwiperSlide: ({ children }) => <div data-testid="swiper-slide">{children}</div>
}))
jest.mock('swiper/css', () => {})

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