未Eject的Create-React-App项目Jest+Enzyme测试报错排查及解决

核心问题 #

你遇到的Unexpected token错误主要源于两个关键问题：

1. 错误的测试启动命令：你在package.json里把test脚本改成了直接执行jest，但CRA自带的Jest配置是通过react-scripts test封装好的——它已经帮你配置了Babel转译JSX、处理enzyme适配等必要规则，直接跑jest会跳过这些预设配置，导致Jest无法解析JSX语法。
2. 缺失Adapter的导入：你的测试代码里调用了configure({adapter: new Adapter()})，但没有导入enzyme-adapter-react-16里的Adapter类，这也会导致后续运行报错（虽然当前的报错先触发了JSX的问题）。

修复步骤（无需eject） #

1. 恢复CRA默认的测试脚本

打开你的package.json，把scripts里的test字段改回CRA的默认值：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test", // 改回这个命令
  "eject": "react-scripts eject"
}

react-scripts test会自动加载CRA预设的Jest和Babel配置，帮你处理JSX转译、node_modules里的必要文件转译等问题，这是解决当前报错最关键的一步。

2. 补全Adapter的导入

修改你的测试文件，在顶部导入Adapter类：

import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'; // 新增这行导入
import NavigationItems from './NavigationItems';
import NavigationItem from './NavigationItem/NavigationItem';

configure({adapter: new Adapter()}); // 现在Adapter变量已正确定义
// ... 剩下的测试代码

3. （可选）添加enzyme快照测试支持

如果你后续需要用enzyme做快照测试，可以安装enzyme-to-json，并在package.json里添加简单的Jest配置（CRA允许在package.json里添加少量Jest配置，无需eject）：

npm install --save-dev enzyme-to-json

然后在package.json里新增：

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ]
}

这样你就可以用expect(wrapper).toMatchSnapshot()来生成和比对组件快照了。

验证修复 #

现在运行npm test，应该就能正常执行测试了——CRA的react-scripts test会正确转译JSX，enzyme的适配器也能正常工作，你的测试逻辑就能顺利执行。

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