Jest encountered an unexpected token: "SyntaxError: Unexpected token {"

[jyurek]

I have followed the code as presented in #4995 and get the same error. Bizarrely, the "accepted" solution refers to a page regarding testing react-navigation in the context of redux, which neither #4995 mentions nor is required for the parse error to manifest.

I have put the project into a git repo: https://github.com/jyurek/react-navigation-error-replication and all you need to do is clone, npm install, and npm test to see the error.

As for the link in that ticket being correct at the time of posting, it wasn't. This was the page on Sep 15 2018: https://web.archive.org/web/20180915033153/https://reactnavigation.org/docs/en/redux-integration.html

There is also no useful result if I search for "mocking" using the reactnavigation.org search.

For reference, this is the error that occurs. It's a parse error, not a compilation error or runtime error:

 FAIL  src/__tests__/navigation.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/jyurek/Development/react-navigation-error-replication/node_modules/react-navigation-stack/dist/index.js:2
    import { Platform } from 'react-native';
           ^

    SyntaxError: Unexpected token {

      2 | import {ExampleScreen} from './screens/ExampleScreen';
      3 |
    > 4 | const Navigation = createStackNavigator({
        |                    ^
      5 |   ExampleScreen: {
      6 |     screen: ExampleScreen,
      7 |   },

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:451:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:493:19)
      at Object.get createStackNavigator [as createStackNavigator] (node_modules/react-navigation/src/react-navigation.js:107:12)
      at Object.<anonymous> (src/navigation.ts:4:20)

[ghost]

Same here

[brentvatne]

you need to read the guide on the jest docs for how to use jest with react-native. or search issues here. or look at the jest config in the example app here - most notably, this line:

react-navigation/examples/NavigationPlayground/package.json

Lines 42 to 44 in a8c0f83

	"transformIgnorePatterns": [
	"node_modules/(?!((jest-)?react-native|react-navigation|@react-navigation/.*))"
	],

i can see from the example project you put together that you did not add a transformIgnorePatterns config, so that is the problem.

[brentvatne]

if either of you want to contribute a guide to setting up jest once you have figured it out based on the above comment, a pr to the docs would be welcome! react-navigation/react-navigation.github.io#345

[kgstew]

@brentvatne Do you happen to know what the right transformIgnorePatterns are for testing with react-navigation? It may be straight forward for someone who has solved it before but the jest config documentation does not do much to make this any easier.