Jest fails with "SyntaxError: Unexpected reserved word" everytime #256

half-shell · 2017-02-09T11:00:03Z

Hello,
I'm working with react-native and when I run the basic index.android.js test file, it systematically fails with the following:

SyntaxError: Unexpected reserved word
      
  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at Object.StackNavigator (node_modules/react-navigation/src/react-navigation.js:15:33)
  at Object.<anonymous> (src/appNavigator.js:13:37)

It looks like I'm doing something wrong, but I can't figure out what. I've tried fiddling around with it (mostly changing variables name), but I keep getting the same error.

The application works though, it doesn't show any error. It is the simpliest navigation app I could make, following the react-navigation doc, using redux.
I was wondering if this happened to anyone else, or if anyone has a clue of the dumb mistake I made.

The text was updated successfully, but these errors were encountered:

grabbou · 2017-02-09T11:52:54Z

cc: @ferrannp

ferrannp · 2017-02-09T12:21:54Z

You need to use transformIgnorePatterns, see from the docs:

The transformIgnorePatterns option can be used to whitelist or blacklist files from being transformed with babel. Many react-native npm modules unfortunately don't pre-compile their source code before publishing.

By default the jest-react-native preset only processes the project's own source files and react-native. If you have npm dependencies that have to be transformed you can customize this configuration option by whitelisting modules other than react-native.

So you can add in your package.json:

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

Unfortunately, it seems that we will still have an error related to PlatformHelpers.native.js:

 Invariant Violation: Native module cannot be null.
      at invariant (node_modules/fbjs/lib/invariant.js:44:15)
      at Linking.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:32:1)
      at new Linking (node_modules/react-native/Libraries/Linking/Linking.js:119:141)
      at Object.<anonymous> (node_modules/react-native/Libraries/Linking/Linking.js:191:16)
      at Object.Linking (node_modules/react-native/Libraries/react-native/react-native.js:91:22)
      at Object.<anonymous> (node_modules/react-navigation/src/PlatformHelpers.native.js:10:21)

So this is basically something we will need to look at.

grabbou · 2017-02-09T12:25:05Z

CC: @satya164 in terms of the latter. If that fixes the issue, maybe we should document it? I am afraid people get into troubles when trying to run basic test cases.

ferrannp · 2017-02-09T12:30:23Z

After transformIgnorePatterns, I can confirm the issue is with Jest importing PlatformHelpers.native.js instead of PlatformHelpers.js.

half-shell · 2017-02-09T14:25:17Z

@grabbou @ferrannp thanks guys, I guess I missed that line in the doc. I'll be glad to help improve the documentation, and not only on that particular issue.
I'll try to send a PR soon to "fix" the areas that seem blurry to me in the docs (since I'm pretty new to the whole react / redux / react-native ecosystem).

grabbou · 2017-02-09T15:05:32Z

Sounds really good, thank you! I am happy that we were able to help! I am flagging that one with docs - feel free to close it with a PR fixing the issue :)

matthamil · 2017-02-15T16:48:32Z

@ferrannp Is there any way to force Jest to import PlatformHelpers.js instead of PlatformHelpers.native.js? I get the same Invariant Violation: Native module cannot be null.:

  ● Test suite failed to run

    Invariant Violation: Native module cannot be null.
      
      at invariant (node_modules/fbjs/lib/invariant.js:44:15)
      at Linking.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:32:1)
      at new Linking (node_modules/react-native/Libraries/Linking/Linking.js:119:141)
      at Object.<anonymous> (node_modules/react-native/Libraries/Linking/Linking.js:191:16)
      at Object.get Linking [as Linking] (node_modules/react-native/Libraries/react-native/react-native.js:91:22)
      at Object.<anonymous> (node_modules/react-navigation/src/PlatformHelpers.native.js:10:21)

This happens after making the changes to my Jest configuration that @half-shell recommended.

ferrannp · 2017-02-15T17:34:46Z

@matthamil I think that for now, in your app you can mock that PlatformHelpers.native.js and implement a manual mock (a copy of PlatformHelpers.js).

matthamil · 2017-02-15T17:36:36Z

@ferrannp Sorry, I don't think I understand exactly what you mean by mocking and implementing a manual mock?

lbonanni · 2017-02-17T13:11:25Z

Thanks @ferrannp ! But, after changing my package.json, a new error has showing up :

SyntaxError: Unexpected token ) at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10) at Object.<anonymous> (node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js:44:28)

In fact, it misses react-clone-referenced-element that we can find in jest-preset.json.

So we need to add this in the package.json :
"transformIgnorePatterns": [ "<rootDir>/node_modules/(?!(jest-)?react-native|react-navigation|react-clone-referenced-element)" ],

Now it works for me :)

tugorez · 2017-03-04T19:04:56Z

Hi guys, I managed all this test-concerns (with jest)

using this in my package.json

{
   .
   .
   .
  "jest": {                                                                      
    "preset": "react-native",                                                    
    "setupFiles": ["<rootDir>/jest/setup.js"],                                   
    "transformIgnorePatterns": [                                                 
      "node_modules/(?!(jest-)?react-native|react-navigation)"                   
    ]                                                                            
  },
  .
  .
  .                                                                              
}

and this mock in /jest/setup.js

jest.mock('Linking', () => ({                                                    
  addEventListener: jest.fn(),                                                   
  removeEventListener: jest.fn(),                                                
  openURL: jest.fn(),                                                            
  canOpenURL: jest.fn(),                                                         
  getInitialURL: jest.fn(),                                                      
}));

an this in my .flowconfig (in case you're using flow too)

[ignore] 

.
.
.
; react-navigation isn't compatible with the newest flow version, ignore it         
.*/node_modules/react-navigation*
.
.
.

I'm using
React Native 0.42
React 15.4.1
Jest 19.0.0

Based on

alvaromb · 2017-03-21T11:19:00Z

I've fixed the Linking mock, the one provided above fails when testing because some functions return a promise.

jest.mock('Linking', () => ({
  addEventListener: jest.fn(),
  removeEventListener: jest.fn(),
  openURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
  canOpenURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
  getInitialURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
}))

ferrannp · 2017-03-21T11:57:50Z

I think these should go into the react-native repo, probably in here https://github.com/facebook/react-native/blob/master/jest/setup.js.

alvaromb · 2017-03-21T11:59:20Z

Thanks @ferrannp!

I was sure that should go to the RN repo, but I couldn't find exactly where. Will send a PR.

AlanFoster · 2017-04-03T13:12:19Z

For anyone visiting this in the future you can place @alvaromb's snippet into a file jest/setup.js, and ensure you've updated your package.json with something similar to:

  "jest": {
    "preset": "react-native",
    "verbose": true,
    "setupFiles": [
      "./jest/setup.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation)"
    ],
    "moduleNameMapper": {
      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
      "^[@./a-zA-Z0-9$_-]+\\.(png|gif)$": "RelativeImageStub"
    }
  }

That fixes the error Invariant Violation: Native module cannot be null.

Although I currently have unrelated issues now:

  ● renders correctly

    TypeError: _this._scrollView.scrollTo is not a function

      at TabViewPagerScroll._this._scrollTo (node_modules/react-native-tab-view/src/TabViewPagerScroll.js:68:19)
      at TabViewPagerScroll.componentDidMount (node_modules/react-native-tab-view/src/TabViewPagerScroll.js:123:197)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)

Edit: Cross-referencing the issue which reports the above stack trace and has a pull request up for it facebook/react-native#13034 👍

* add jest config for react-navigation in docs (#256) * Docs: Update redux-integration guide #246

* master: add jest config for react-navigation in docs (react-navigation#256) (react-navigation#331)

grabbou · 2017-04-23T15:29:10Z

Closed in e8726c1

react-navigation/react-navigation#256

Maxime-Antoine · 2017-06-08T03:10:31Z

Hi,

Unfortunately, I still get this issue:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

  at invariant (node_modules/fbjs/lib/invariant.js:44:15)
  at createFiberFromElementType (node_modules/react-test-renderer/lib/ReactFiber.js:247:54)
  at Object.<anonymous>.exports.createFiberFromElement (node_modules/react-test-renderer/lib/ReactFiber.js:192:15)
  at reconcileSingleElement (node_modules/react-test-renderer/lib/ReactChildFiber.js:882:19)
  at reconcileChildFibers (node_modules/react-test-renderer/lib/ReactChildFiber.js:992:37)
  at reconcileChildrenAtPriority (node_modules/react-test-renderer/lib/ReactFiberBeginWork.js:130:30)
  at reconcileChildren (node_modules/react-test-renderer/lib/ReactFiberBeginWork.js:108:5)
  at updateHostRoot (node_modules/react-test-renderer/lib/ReactFiberBeginWork.js:287:7)
  at beginWork (node_modules/react-test-renderer/lib/ReactFiberBeginWork.js:645:16)
  at performUnitOfWork (node_modules/react-test-renderer/lib/ReactFiberScheduler.js:634:16)

With:

package.json

"dependencies": {
     "react": "16.0.0-alpha.6",
        "react-native": "^0.44.0",
        "react-navigation": "1.0.0-beta.11"
   },
   "devDependencies": {
     "babel-jest": "^20.0.3",
     "babel-preset-react-native": "^1.9.2",
     "jest": "^20.0.4",
     "react-test-renderer": "^16.0.0-alpha.6"
   },
   "jest": {
     "preset": "react-native",
     "verbose": true,
     "setupFiles": [
       "./jest-setup.js"
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!(jest-)?react-native|react-navigation)"
     ]
   },

.flowconfig

 [ignore]
 ; react-navigation isn't compatible with the newest flow version, ignore it         
 .\*/node_modules/react-navigation\*

jest-setup.js

 jest.mock('Linking', () => ({
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    openURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
    canOpenURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
    getInitialURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
 }))

Is there something I'm missing ?

KevKo1990 · 2017-06-09T06:04:00Z

I have the same failure as @Maxime-Antoine , I changed the jest import in package.json as described here: https://github.com/react-community/react-navigation/blob/master/docs/guides/Redux-Integration.md#mocking-tests

Snapshots are not possible... my error message:


    console.error node_modules/react-native/Libraries/Core/ExceptionsManager.js:71
      Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

  ● renders correctly

    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
      
      at invariant (node_modules/fbjs/lib/invariant.js:44:15)
      at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (node_modules/react-test-renderer/lib/instantiateReactComponent.js:77:56)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:367:22)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-test-renderer/lib/ReactReconciler.js:46:35)
      at mountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:55:31)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26)

KevKo1990 · 2017-06-13T00:16:28Z

@grabbou you have any idea, why it is not working?

KevKo1990 · 2017-06-15T23:35:30Z

@Maxime-Antoine Could you solve it?

Maxime-Antoine · 2017-06-16T02:00:58Z

@KevKo1990 no, not yet

KevKo1990 · 2017-06-26T11:05:45Z

@grabbou do you need anything else for investigating?

niom · 2017-10-17T19:58:19Z

@KevKo1990 @Maxime-Antoine If you didn't get this fixed. I faced the same issue and I had a stupid user error in my test configuration.

//index.android.js

import React from 'react'
import { AppRegistry } from 'react-native'
import App from './app/App'

AppRegistry.registerComponent('AwesomeApp', () => App);

//__tests__/AppTest.js
import 'react-native';
import React from 'react';
import App from '../index.android';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
jest.mock('react-native-camera', () => require.requireActual('../__mocks__/react-native-camera').default)

it('renders correctly', () => {
  const tree = renderer.create(
    <App />
  );
});

This configuration made the test fail with Exception:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

Reason was that I was trying to test the AppRegistry file instead of the actual component

so with the correct test:

//__tests__/AppTest.js
import 'react-native';
import React from 'react';
import App from '../app/App'; //<- Correct component

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
jest.mock('react-native-camera', () => require.requireActual('../__mocks__/react-native-camera').default)

it('renders correctly', () => {
  const tree = renderer.create(
    <App />
  );
});

Hope that you got your problem solved.

Fixes #256

…eact-navigation#331) * add jest config for react-navigation in docs (react-navigation#256) * Docs: Update redux-integration guide react-navigation#246

miticous · 2020-07-08T16:36:46Z

After a lot of tries (yes, I've tried everything listed before this comment) I solved this problem by create a manual mock for NavigationService.js. Just follow this question on stackoverflow

https://stackoverflow.com/questions/55319581/why-isn%C2%B4t-mock-from-mock-folder-invoked-when-running-test-for-redux-action

You're welcome

Fixes react-navigation#256

grabbou added the documentation label Feb 9, 2017

half-shell added a commit to half-shell/react-navigation that referenced this issue Feb 14, 2017

add jest config for react-navigation in docs (react-navigation#256)

bd35eeb

half-shell mentioned this issue Feb 21, 2017

add jest config for react-navigation in docs (#256) #331

Merged

matthamil mentioned this issue Mar 14, 2017

Unexpected token import #657

Closed

ericvicenti pushed a commit that referenced this issue Apr 4, 2017

add jest config for react-navigation in docs (#256) (#331)

e8726c1

* add jest config for react-navigation in docs (#256) * Docs: Update redux-integration guide #246

lintonye added a commit to lintonye/react-navigation that referenced this issue Apr 4, 2017

Merge branch 'master' into shared-element

4df9b89

* master: add jest config for react-navigation in docs (react-navigation#256) (react-navigation#331)

jurassix mentioned this issue Apr 6, 2017

Bug running Jest with ScrollView dependant components facebook/react-native#13034

Closed

grabbou closed this as completed Apr 23, 2017

bdickason mentioned this issue May 25, 2017

Simple jest test fails with @exponent error TekkenChicken/t7-chicken-native#36

Closed

cedced19 added a commit to cedced19/decouvrir-phalsbourg that referenced this issue May 26, 2017

Fix tests

842f78b

react-navigation/react-navigation#256

KevKo1990 mentioned this issue Jun 29, 2017

Jest failure with React Navigation #2024

Closed

octohedron mentioned this issue Aug 4, 2017

Cannot find module ‘./PlatformHelpers’ from ‘createNavigationContainer.js’ #2310

Closed

keksipurkki mentioned this issue Jan 25, 2018

Unexpected token import on AppNavigator.js in redux integration example #3348

Closed

This was referenced Jul 17, 2019

jest-with-react-native-getting-issue jestjs/jest#3234

Closed

React Native - SyntaxError: Unexpected token import kulshekhar/ts-jest#604

Closed

satya164 added a commit that referenced this issue Feb 7, 2020

fix: change POP behaviour to remove elements from index only

7a3d652

Fixes #256

joshuapinter pushed a commit to cntral/react-navigation that referenced this issue Sep 29, 2021

fix: change POP behaviour to remove elements from index only

7f58450

Fixes react-navigation#256

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jest fails with "SyntaxError: Unexpected reserved word" everytime #256

Jest fails with "SyntaxError: Unexpected reserved word" everytime #256

half-shell commented Feb 9, 2017

grabbou commented Feb 9, 2017

ferrannp commented Feb 9, 2017

grabbou commented Feb 9, 2017

ferrannp commented Feb 9, 2017

half-shell commented Feb 9, 2017

grabbou commented Feb 9, 2017 •

edited

Loading

matthamil commented Feb 15, 2017 •

edited

Loading

ferrannp commented Feb 15, 2017

matthamil commented Feb 15, 2017

lbonanni commented Feb 17, 2017 •

edited

Loading

tugorez commented Mar 4, 2017 •

edited

Loading

alvaromb commented Mar 21, 2017

ferrannp commented Mar 21, 2017

alvaromb commented Mar 21, 2017

AlanFoster commented Apr 3, 2017 •

edited

Loading

grabbou commented Apr 23, 2017

Maxime-Antoine commented Jun 8, 2017

KevKo1990 commented Jun 9, 2017

KevKo1990 commented Jun 13, 2017

KevKo1990 commented Jun 15, 2017

Maxime-Antoine commented Jun 16, 2017

KevKo1990 commented Jun 26, 2017

niom commented Oct 17, 2017

miticous commented Jul 8, 2020 •

edited

Loading

Jest fails with "SyntaxError: Unexpected reserved word" everytime #256

Jest fails with "SyntaxError: Unexpected reserved word" everytime #256

Comments

half-shell commented Feb 9, 2017

grabbou commented Feb 9, 2017

ferrannp commented Feb 9, 2017

grabbou commented Feb 9, 2017

ferrannp commented Feb 9, 2017

half-shell commented Feb 9, 2017

grabbou commented Feb 9, 2017 • edited Loading

matthamil commented Feb 15, 2017 • edited Loading

ferrannp commented Feb 15, 2017

matthamil commented Feb 15, 2017

lbonanni commented Feb 17, 2017 • edited Loading

tugorez commented Mar 4, 2017 • edited Loading

alvaromb commented Mar 21, 2017

ferrannp commented Mar 21, 2017

alvaromb commented Mar 21, 2017

AlanFoster commented Apr 3, 2017 • edited Loading

grabbou commented Apr 23, 2017

Maxime-Antoine commented Jun 8, 2017

KevKo1990 commented Jun 9, 2017

KevKo1990 commented Jun 13, 2017

KevKo1990 commented Jun 15, 2017

Maxime-Antoine commented Jun 16, 2017

KevKo1990 commented Jun 26, 2017

niom commented Oct 17, 2017

miticous commented Jul 8, 2020 • edited Loading

grabbou commented Feb 9, 2017 •

edited

Loading

matthamil commented Feb 15, 2017 •

edited

Loading

lbonanni commented Feb 17, 2017 •

edited

Loading

tugorez commented Mar 4, 2017 •

edited

Loading

AlanFoster commented Apr 3, 2017 •

edited

Loading

miticous commented Jul 8, 2020 •

edited

Loading