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

Question

I've tried quite a few variations on this with no luck.

Situation: I want to render a React Native app that has a Mapbox map in it inside my Jest tests, so I can test the logic we wrote around it.

I've managed to reproduce the error I'm seeing in a mini repo: https://github.com/JKowalsky/mapbox-error-test-repo/tree/master

The mini repo is a react-native init default project that includes Mapbox and sets an access token, just so we can play with the dependency.

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

I'd expect the default __test__/App-test.js to still run, but it fails on the Mapbox include. It looked like a Babel problem, so I set up the following 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"
        ]
    };
};

And here's the package.json to run that:

{
  "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"
  }
}

I still get the unexpected token error:

/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)

Final curiosity: I've added a transform inside the jest config in package.json, but it then gives me a type error (this is not a typescript project.)

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

Doing that gives me this error which is even more inscrutable:

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.

Any hints? I've been circling this issue for a while, and there isn't a ton of testing infrastructure support for Mapbox.

Answer 1

Alright, I actually managed to get this working. I had to mock both the Mapbox-gl and react-native EventEmitter dependencies in addition to adding a ton of babel transforms. The linked repository has been updated with a now passing unit test.