Next.js中Jest测试GraphQL组件报Unexpected token export错误

报错本质是Jest默认跳过node_modules目录下所有文件的语法转译，而你项目依赖链中引入的uuid包，其默认被解析到的浏览器端ESM产物（dist/esm-browser/index.js）使用了ES Module规范的export语法，Jest在Node.js测试环境下默认只识别CommonJS模块语法，无法直接解析ESM格式代码，因此抛出Unexpected token 'export'错误。
你使用的next/jest预设只会处理Next.js框架本身及部分官方依赖的转译，不会覆盖所有第三方ESM依赖，uuid就属于未被默认处理的依赖范畴。

方法1：调整转译忽略规则，让Jest处理uuid包 #

修改jest.config.js，新增transformIgnorePatterns配置，将uuid从默认忽略转译的列表中排除：

const nextJest = require('next/jest')
const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@components/(.*)$': '<rootDir>/components/$1',
    '^@utils/(.*)$': '<rootDir>/utils/$1',
    '^@graphql/(.*)$': '<rootDir>/graphql/$1',
  },
  collectCoverageFrom: ['./components/**/*.{js,jsx}'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  // 新增配置：转译node_modules下的uuid包
  transformIgnorePatterns: [
    '/node_modules/(?!uuid)/'
  ]
}

module.exports = createJestConfig(customJestConfig)

如果后续其他第三方ESM依赖报同类语法错误，直接把对应包名用|分隔追加到规则里即可，格式为(?!uuid|package-a|package-b)。

方法2：强制映射uuid到CommonJS版本 #

如果方法1不生效，可以直接通过模块别名，把uuid的导入路径强制指向它的CommonJS产物，从根源上跳过ESM文件的加载：
在已有的moduleNameMapper配置中追加一条规则：

moduleNameMapper: {
  '^@components/(.*)$': '<rootDir>/components/$1',
  '^@utils/(.*)$': '<rootDir>/utils/$1',
  '^@graphql/(.*)$': '<rootDir>/graphql/$1',
  // 新增uuid映射规则
  '^uuid$': '<rootDir>/node_modules/uuid/dist/index.js'
}

你当前的测试用例存在两个潜在问题，修复转译问题后可能会遇到：

• MockedProvider对请求的匹配是严格校验query和variables的，你当前mock配置中写死variables.text为空字符串，但实际组件触发mutation时取的是textarea输入值，后续做交互测试时需要保证mock的variables和实际请求参数完全一致，否则会报“No mocked response found”类错误。
• 你贴出的组件代码中useMutation、CREATE_POST、GET_USER、Component、Icon都没有显式导入，确认实际代码中这些依赖都已正确引入，否则会触发引用错误。

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