Next.js 13.4 App Router用Jest遇令牌解析错误求助

问题根源 #

next/jest 已经内置了对TypeScript、Next.js语法（包括App Router）的转换处理，你当前配置中同时指定 preset: 'ts-jest' 会导致配置冲突，触发Jest的解析错误。

解决步骤 #

1. 移除冲突的预设配置
   直接删除Jest配置里的 preset: 'ts-jest' 项，修改后的完整配置如下：

   const nextJest = require('next/jest')
   
   const createJestConfig = nextJest({
     dir: './',
   })
   
   /** @type {import('jest').Config} */
   const customJestConfig = {
     setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
     moduleDirectories: ['node_modules', '<rootDir>/'],
     testEnvironment: 'jest-environment-jsdom',
     // 已移除preset: 'ts-jest'
   }
   
   module.exports = createJestConfig(customJestConfig)
   

2. 确认依赖完整性
   确保已安装所有必要的测试依赖，未安装的话执行：

   npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
   

3. 配置测试初始化文件
   如果你的jest.setup.js文件存在，确保添加@testing-library/jest-dom的扩展支持：

   import '@testing-library/jest-dom';
   

4. 验证测试文件规范
   测试文件需符合Jest命名规则（如*.test.tsx或*.spec.tsx），避免在测试代码中使用未被next/jest兼容的非标准语法。

额外排查点 #

如果仍有解析错误，检查是否存在需要转换的第三方依赖（部分node_modules包使用ES模块语法），可在配置中添加transformIgnorePatterns指定需要转换的包：

const customJestConfig = {
  // 其他配置...
  transformIgnorePatterns: [
    '/node_modules/(?!(依赖包1|依赖包2)/)',
  ],
}

内容的提问来源于stack exchange，提问作者Nirmal Kumar S