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

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.