意外的导入令牌 - 使用 Jest 测试 React Native

Posted 2023-02-22

【中文标题】意外的导入令牌 - 使用 Jest 测试 React Native

【英文标题】：Unexpected import token - testing React Native with Jest

【发布时间】：2017-03-24 20:15:53

【问题描述】：

当我尝试用 jest 测试我的 react-native 应用程序时，我遇到了一个奇怪的导入错误。我已经安装了 babel-jest、babel-preset-react-native、jest、jest-react-native 和 react-test-render，但是当我运行 npm test 时收到此错误消息。

● 测试套件无法运行

/Users/maftalion/www/stars20/kiosk/node_modules/native-base/index.js:4
import Drawer from './Components/vendor/react-native-drawer';
^^^^^^
**SyntaxError: Unexpected token import**

  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
  at Object.<anonymous> (src/routes/Identification.js:3:17)
  at Object.<anonymous> (src/routes/router.js:4:21)

测试套件：1 个失败，1 个通过，总共 2 个 测试：1 通过，共 1 快照：通过 1 个，共 1 个 时间：1.011s

【参考方案1】：

想通了，基本上在transformIgnorePatterns中抛出任何使用es6语法的节点模块。

"transformIgnorePatterns": [
   "node_modules/(?!react-native|native-base|react-clone-referenced-element)"
],

【讨论】：

有关此解决方法的更多上下文：github.com/GeekyAnts/NativeBase/issues/…

【参考方案2】：

我需要添加 .babelrc：

    "presets": ["@babel/env","@babel/react"]

我还需要安装这个模块 npm install add --dev react-test-renderer

【参考方案3】：

您在 webpack config 中配置了 Babel，这仅适用于 webpack。当其他工具（例如 Jest）使用 Babel 时，他们不会看到该配置，因为他们不会查看 webpack 配置。你可以使用 .babelrc 文件来配置 Babel，这将适用于任何运行 Babel（不仅仅是 webpack）的东西。

使用 .babelrc 通常是首选，因为您希望有一个通用的 babel 配置，如果您需要覆盖某个设置，您仍然可以在特定的应用程序中执行此操作，例如在 webpack 配置中。

创建以下 .babelrc：

  "presets": ["es2015", "react"]

这样，您可以在 webpack 配置中删除预设选项，因为它将使用 .babelrc。请注意，[cacheDirectory 选项][3] 是 babel-loader 特有的，不用于配置底层 Babel。

您的测试中还有一个错字，toMatchSnapShot() 应该是 toMatchSnapshot()。

expect(rendered.toJSON()).toMatchSnapshot();

【参考方案4】：

我发现前面给出的答案并没有解决 Unexpected token import 错误在测试本身，如果它们是用 ES6 编写的（比如 Ignite CLI 在 ignite new MyProject 之后创建的样板测试)。

我终于设法通过在package.json 中添加test 任务来消除与ES6 相关的错误：

"test": "NODE_ENV=test jest --no-cache"

我正在使用 RN 0.45.1、Node 7.10.1（和 8.1.2）、Yarn 0.24.6 和 Jest 20.0.4

PS：不要总是在控制台中看到这一点，但在 VS Code 中 v1.13.1 设置 --no-cache 会有所不同。

【参考方案5】：

尝试将transformIgnorePatterns 添加到您的 package.json：

  "name": "MyAwesomeApp",
  ...
  "jest": 
    "transformIgnorePatterns": ["/node_modules/"]
  

然而，对我来说，Jest 开箱即用：

$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
$ npm test
...
Tests:       2 passed

我正在使用 React Native v0.37.0。

【讨论】：

是的，当我创建一个新的 RN 应用程序时，它也工作得很好，不知道为什么它会给我带来问题。 transformIgnorePatterns 使我的两个测试都失败

将其设置为“/node_modules/”将不起作用，因为它指示 Jest 不转译所有第 3 方库。这也是默认配置值，所以它并没有真正改变任何东西。见facebook.github.io/jest/docs/…