Next.js 12 Rust模式配置Jest+Testing Library报JSX未启用错误

• Next.js 12 内置的next/jest工具默认已经集成了基于SWC（Rust编译器）的JSX/TSX/TS语法转译能力，Rust编译器模式下不需要额外引入Babel相关转译依赖。
• 手动在customJestConfig中添加transform规则会直接覆盖next/jest默认注入的SWC转译配置，而自行编写的Babel规则既缺少TypeScript语法支持，也没有对齐Next.js的JSX转换逻辑，直接触发JSX语法未启用的报错。
• 根目录下手动创建的.babelrc文件会被Next.js自动识别，触发框架禁用SWC编译链路、回退到Babel编译模式，进一步加剧转译逻辑冲突。

1. 修改jest.config.js，删除自定义的transform配置，保留next/jest默认的转译逻辑，修正后的配置如下：

import nextJest from "next/jest";

const createJestConfig = nextJest({dir: '.'})

const customJestConfig = {
    testEnvironment: "jest-environment-jsdom",
    clearMocks: true,
    moduleDirectories: ["node_modules", "<rootDir>/"],
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
}

export default createJestConfig(customJestConfig)

2. 删除根目录下手动创建的.babelrc文件，卸载为了自定义Babel安装的非必要依赖，避免Next.js误判编译模式：

npm uninstall @babel/preset-env @babel/preset-react babel-jest

3. 清除Jest本地缓存，避免旧的转译缓存影响结果：

npx jest --clearCache

4. 重新运行测试命令即可正常渲染React组件执行测试。

如果项目本身有必须依赖Babel的自定义编译逻辑（比如使用了Babel专属插件），无法使用SWC编译链路，则不需要删除.babelrc，但需要把Babel预设替换为Next.js官方提供的Babel预设，不要自行组合preset，修正后的.babelrc配置如下：

{
  "presets": ["next/babel"]
}

该配置下Next.js会自动回退到Babel编译模式，JSX转译逻辑可以和babel-jest正常对齐，也能解决JSX语法报错问题，但会损失Rust编译器的编译性能优势。

注意：next/jest生成的默认配置已经自动处理了模块路径别名、静态资源mock、语法转译等Next.js项目特有的适配逻辑，非必要不要手动覆盖transform、moduleNameMapper这类核心配置，否则会破坏内置的适配规则。

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