Next.js中用Jest和RTL报错：Cannot use import statement outside a module

问题原因 #

Swiper（包括其React封装及依赖的ssr-window、dom7）属于纯ES模块，而Jest默认不会转译node_modules目录下的模块，导致无法识别模块内的import语法，抛出Cannot use import statement outside a module错误。

解决方案 #

修改jest.config.js配置，让Jest转译Swiper及其相关依赖：

1. 调整transformIgnorePatterns，排除Swiper及依赖包，允许Jest转译它们
2. 确保transform配置使用babel-jest结合Next.js的Babel预设处理文件

完整的jest.config.js示例 #

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './', // 你的Next.js项目根目录
})

const customJestConfig = {
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/(?!swiper|ssr-window|dom7)',
  ],
}

module.exports = createJestConfig(customJestConfig)

关键说明 #

• transformIgnorePatterns中的(?!swiper|ssr-window|dom7)表示：除了这三个包之外，其他node_modules里的模块都跳过转译
• babel-jest配合next/babel预设可以正确转译ES模块语法，适配Next.js的环境
• 无需额外安装其他依赖，只要你已经按照官方文档安装了Jest和React Testing Library即可

验证 #

保存配置后重新运行测试命令：

npm run test

此时Jest应该能正常解析Swiper模块，测试可以顺利执行。

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