意外的导入令牌 - 使用 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中抛出任何使用es6语法的节点模块。

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

Answer 2

我需要添加 .babelrc：

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

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

Answer 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();

Answer 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 会有所不同。

Answer 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。