从Next.js 12升级到13后出现gensync模块找不到的Jest测试问题

直接安装缺失的依赖 #

gensync是Babel生态的间接依赖，合并分支后可能因依赖树变更导致未被安装，直接显式安装它：

npm install --save-dev gensync

检查并更新Jest配置 #

Next.js 13对Jest的配置要求有所调整，确保你的jest.config.js使用官方推荐的next/jest预设：

const nextJest = require('next/jest')

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

const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom', // 适配React组件测试
}

module.exports = createJestConfig(customJestConfig)

清理缓存避免残留问题 #

清理npm和Jest的缓存，排除缓存导致的依赖异常：

# 清理npm缓存
npm cache clean --force

# 清理Jest缓存
npx jest --clearCache

重新执行依赖安装（规范步骤） #

按以下顺序操作，确保依赖安装干净：

1. 删除node_modules、package-lock.json（若用yarn则删除yarn.lock）
2. 先尝试普通安装：npm install
3. 若存在peer依赖冲突，再执行：npm install --legacy-peer-deps

验证依赖版本兼容性 #

检查package.json中以下依赖的版本是否与Next.js 13兼容：

• jest：建议使用^28.1.0及以上版本
• babel-jest：版本需与项目中Babel的主版本匹配
• @testing-library/react：建议使用^13.4.0及以上版本

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