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

IT技术 reactjs jestjs create-react-app
2021-04-29 23:21:44

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

但是,当我运行jestor时,我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失败惨重?

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"]
}

现在,这两个jestnpm test两个工作,因为他们应该。