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

Question

当我尝试用 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

Answer 1

尝试将 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。

Answer 2

搞清楚了，基本上把任何在 transformIgnorePatterns 中使用 es6 语法的节点模块都扔掉了。

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

Answer 3

我发现之前给出的答案没有解决 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 有所不同。

Answer 4

您在 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();

Answer 5

我需要添加 .babelrc ：

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

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

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

Unexpected import token - testing React Native with Jest

ecmascript-6

jestjs

babeljs

react-native