用 create-react-app 开玩笑 - 意外的令牌错误答案

【问题标题】：Jest with create-react-app - unexpected token errors用 create-react-app 开玩笑 - 意外的令牌错误
【发布时间】：2018-08-04 01:27:11
【问题描述】：

我正在开发一个最近从旧的 Webpack 构建转换为使用 create-react-app 的应用程序。大部分过渡都很顺利，但我在之前的单元测试中遇到了一些主要问题。当我运行具有"test": "react-scripts test --env=jsdom" 的标准 package.json 测试脚本的npm test 时，它说我所有的快照测试都失败了。这很好，也是意料之中的，因为发生了很多变化，测试需要更新。

但是，当我只运行jest 或jest --updateSnapshot 时，我的所有测试都会立即失败并出现SyntaxError: Unexpected token 错误，其中大部分与import 有关。这让我相信 Jest 没有使用 Babel 来正确转换 ES6 语法。

之前，我们使用带有以下设置的 .babelrc 文件：

{
"presets": ["env", "react", "stage-0", "flow"],
"plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy"]
}

但由于 Babel 已经包含在 create-react-app 中，我删除了这个文件以及对 Babel 的任何引用。我的 package.json 也没有为 Jest 本身设置任何特殊脚本。

我已经尝试重新添加一些以前使用过的 Babel 包，但在进一步阅读之后，除非我从 create-react-app 弹出，否则它们似乎无论如何都无法工作，目前这不是一个选项。

什么会导致npm test 正常运行但jest 惨遭失败？

【问题讨论】：

标签： reactjs jestjs create-react-app

【解决方案1】：

原来这是一个 Babel 问题。即使create-react-app 是预先配置的，我们仍然必须添加自定义配置，因为我们的应用程序最初不是使用cra 构建的。我安装了一些新的开发依赖项：

"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",

并且还更新了.babelrc：

{
  "presets": ["babel-preset-react-app"]
}

现在jest 和npm test 都可以正常工作了。

【讨论】：