How to get rid of SyntaxError: Unexpected Token { when trying to test a React-Native with a Mapbox in Jest?

Question

我已经尝试了很多变体，但没有成功。

情况：我想在我的 Jest 测试中呈现一个包含 Mapbox 地图的 React Native 应用程序，这样我就可以测试我们围绕它编写的逻辑。

我已经成功地重现了我在迷你回购中看到的错误：https://github.com/JKowalsky/mapbox-error-test-repo/tree/master

mini repo 是一个包含 Mapbox 并设置访问令牌的 react-native init 默认项目，这样我们就可以使用依赖项了。

import MapboxGL from '@react-native-mapbox-gl/maps';
MapboxGL.setAccessToken('fakeyfakeytokentoken');

我希望默认 __test__/App-test.js 仍然是运行，但它在 Mapbox 包含上失败了。它看起来像一个 Babel 问题，所以我设置了以下 babel.config.js;

module.exports = function(api) {
    api.cache(true);
    return {
        presets: [
            'module:metro-react-native-babel-preset',
            "@babel/preset-env",
            "@babel/preset-flow"
        ],
        plugins: [
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-syntax-dynamic-import"
        ]
    };
};

这里是 package.json 到运行是：

{
  "name": "mapboxerror",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest --no-cache",
    "lint": "eslint ."
  },
  "dependencies": {
    "@mapbox/geo-viewport": "^0.4.0",
    "@react-native-mapbox-gl/maps": "^7.0.6",
    "jsdom": "^15.1.1",
    "mapbox": "^1.0.0-beta10",
    "react": "16.9.0",
    "react-native": "0.61.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-flow": "^7.0.0",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.4.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

我仍然收到意外令牌错误：

/Users/jennifer/dev/mapbox-error-test-repo/node_modules/@react-native-mapbox-gl/maps/javascript/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import {Animated, NativeModules, PermissionsAndroid} from 'react-native';

   SyntaxError: Unexpected token {

      25 | } from 'react-native/Libraries/NewAppScreen';
      26 |
    > 27 | import MapboxGL from '@react-native-mapbox-gl/maps';
         | ^
      28 | MapboxGL.setAccessToken('fakeyfakeytokentoken');
      29 |
      30 | const App: () => React$Node = () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (App.js:27:1)

最后的好奇心：我在 package.json 的 jest 配置中添加了一个转换，但它随后给了我一个类型错误（这不是打字稿项目。）

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(mapbox-gl|mapbox|@react-native-mapbox-gl))/"
    ]
  }

这样做给了我这个更难以理解的错误：

yarn run v1.16.0
$ jest --no-cache
 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    TypeError: (0 , _typeof4.default) is not a function

      at _typeof2 (node_modules/@babel/runtime/helpers/typeof.js:8:63)
      at _typeof (node_modules/@babel/runtime/helpers/typeof.js:22:39)
      at new Promise (node_modules/promise/lib/core.js:44:31)
      at valuePromise (node_modules/promise/lib/es6-extensions.js:18:11)
      at Object.<anonymous> (node_modules/promise/lib/es6-extensions.js:10:12)
      at Object.<anonymous> (node_modules/promise/lib/index.js:9:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.192s
Ran all test suites.
error Command failed with exit code 1.

有什么提示吗？我已经考虑这个问题一段时间了，而且 Mapbox 没有大量的测试基础设施支持。

Answer 1

好吧，我真的成功了。除了添加大量的 babel 转换之外，我还必须同时模拟 Mapbox-gl 和 react-native EventEmitter 依赖项。链接的存储库已更新，现已通过单元测试。

How to get rid of SyntaxError: Unexpected Token { when trying to test a React-Native with a Mapbox in Jest?

How to get rid of SyntaxError: Unexpected Token { when trying to test a React-Native with a Mapbox in Jest?

mapbox

jestjs

babeljs

react-native