SyntaxError：意外的标识符 jest & babel 7 & react-native 0.56答案

【问题标题】：SyntaxError: Unexpected identifier jest & babel 7 & react-native 0.56SyntaxError：意外的标识符 jest & babel 7 & react-native 0.56
【发布时间】：2019-02-09 16:42:26
【问题描述】：

将 react 原生版本升级到 0.56 后，我无法运行测试。我在升级前测试了我的应用。

我收到 SyntaxError: Unexpected identifier 错误。

详情如下。你能帮帮我吗？

这是我的 devDependencies。

"@babel/core": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-preset-react-native": "^5.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.4.2",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.4.2",
"react-test-renderer": "^16.4.2",
"regenerator-runtime": "^0.12.1",
"sinon": "^6.1.5"

我就是这样配置笑话的。

"jest": {
  "preset": "react-native",
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ],
  "setupTestFrameworkScriptFile": "<rootDir>/setupTest.js"
}

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

错误详情 - 1

import KeyboardAwareMixin from './lib/KeyboardAwareMixin';
       ^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  1 | import React from "react";
  2 | import {View} from "react-native";
> 3 | import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view";
    | ^
  4 | import PropTypes from 'prop-types';
  5 |
  6 | /**

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

错误详情 - 2

import createIconSet from './lib/create-icon-set';
       ^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  1 | import React, {Component} from "react";
  2 | import {TouchableOpacity} from "react-native";
> 3 | import Icon from "react-native-vector-icons/FontAwesome";
    | ^
  4 | import {COLORS} from "../config/Constant";
  5 | import PropTypes from "prop-types";
  6 |

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

错误详情 - 3

SyntaxError: /Users/----/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js: Unexpected token (26:12)

  24 | const flattenStyle = require('flattenStyle');
  25 |
> 26 | import type {Props as TouchableWithoutFeedbackProps} from 'TouchableWithoutFeedback';
     |             ^
  27 | import type {ViewStyleProp} from 'StyleSheet';
  28 |
  29 | type Event = Object;

  at Parser.raise (node_modules/@babel/parser/lib/index.js:3938:15)
  at Parser.unexpected (node_modules/@babel/parser/lib/index.js:5247:16)
  at Parser.expectContextual (node_modules/@babel/parser/lib/index.js:5215:41)
  at Parser.parseImport (node_modules/@babel/parser/lib/index.js:8403:12)
  at Parser.parseStatementContent (node_modules/@babel/parser/lib/index.js:7225:27)
  at Parser.parseStatement (node_modules/@babel/parser/lib/index.js:7144:17)
  at Parser.parseBlockOrModuleBlockBody (node_modules/@babel/parser/lib/index.js:7695:23)
  at Parser.parseBlockBody (node_modules/@babel/parser/lib/index.js:7682:10)
  at Parser.parseTopLevel (node_modules/@babel/parser/lib/index.js:7109:10)
  at Parser.parse (node_modules/@babel/parser/lib/index.js:8495:17)

【问题讨论】：

标签： react-native testing babeljs jestjs unexpected-token

【解决方案1】：

可能是版本冲突。运行以下命令，假设您使用 npm：

rm -rf node_modules/
rm package-lock.json
npm i

【讨论】：

【解决方案2】：

当我使用 react-native 模块中的 babeljs 依赖项时，它起作用了。 https://github.com/facebook/react-native/issues/20966

【讨论】：

【解决方案3】：

不确定，但也许 OP 已经解决了这里的问题

https://github.com/facebook/react-native/issues/20966

你可以

使用 RN 0.56 的 babel 版本。
或者将 babel 7 的 RN 升级到 0.57

【讨论】：