React项目从Babel迁移到SWC时RITEway测试JSX报错如何解决

你遇到的语法报错核心原因是@swc-node/register默认未开启JSX语法解析能力，无法识别React组件的JSX标签语法，补充SWC的JSX转译配置即可解决，以下是具体操作方案：

方案一（推荐，和Next.js默认配置对齐） #

1. 在项目根目录新建.swcrc配置文件，写入以下内容：

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  },
  "module": {
    "type": "commonjs"
  }
}

该配置作用如下：

• 开启JSX语法解析能力
• 使用React 17+支持的automatic runtime，无需在JSX文件顶部手动引入React
• 将ES模块转译为CommonJS格式，适配Node测试运行环境

2. 调整package.json的test命令，补回原命令的NODE_ENV=test环境变量：

"test": "NODE_ENV=test riteway -r @swc-node/register 'src/**/*.test.js' | tap-nirvana"

方案二（无需新增配置文件，直接修改命令） #

通过SWC_NODE的内置环境变量直接开启JSX支持，直接修改test命令即可：

"test": "NODE_ENV=test SWC_NODE_JSX=1 riteway -r @swc-node/register 'src/**/*.test.js' | tap-nirvana"

修改完成后重新运行测试命令，React组件测试用例即可正常执行。

内容的提问来源于stack exchange，提问作者J. Hesters