未eject的Create React App中Jest/Enzyme测试JSX报Unexpected token求助

问题根因 #

你修改了Create React App默认的test执行命令，直接调用独立安装的jest，没有使用CRA内置的预配置测试环境。CRA默认已内置适配JSX转译的Babel配置、Jest规则，独立运行jest没有对应配置，无法识别JSX语法，所以抛出Unexpected token错误。

解决方案（无需eject） #

步骤1：还原test命令 #

修改package.json中的scripts配置，将"test": "jest"替换为CRA默认的测试命令：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

步骤2：卸载冲突的冗余依赖 #

你额外安装的jest、Babel预设等依赖和CRA内置的版本存在冲突，执行以下命令卸载：

npm uninstall @babel/preset-env @babel/preset-react babel-jest jest react-test-renderer
# 如果你用yarn的话执行：
# yarn remove @babel/preset-env @babel/preset-react babel-jest jest react-test-renderer

注：你之前安装的react-test-renderer为v17版本，和项目使用的React v16版本不匹配，若后续需要使用该包，可单独安装对应v16版本：npm install react-test-renderer@16.x。

步骤3：清空缓存运行测试 #

先清除jest缓存避免历史缓存影响：

npm test -- --clearCache

再执行测试命令即可正常运行：

npm test

补充说明 #

你现有src/setupTests.js的Enzyme配置无需修改，只要该文件放在src根目录下，CRA会自动读取加载，无需额外配置。
如果后续需要自定义Jest/Babel配置又不想执行eject操作，可以使用CRACO（Create React App Configuration Override）工具覆盖默认配置，不需要修改CRA内置的配置文件。

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