SyntaxError: Unexpected reserved word when using nativeBase

[alvarolorentedev]

Do you want to request a feature or report a bug?
Bug report

What is the current behavior?
jest fails to run test on react component when using nativeBase with

 FAIL  __tests__/app/containers/login.js
  ● Test suite failed to run
    /Users/alvarojosepl/workspace/jest_syntax_error/node_modules/native-base/index.js:4
    import Drawer from './Components/vendor/react-native-drawer';
    ^^^^^^
    SyntaxError: Unexpected token import

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at Object.<anonymous> (index.ios.js:14:17)

this is on the import line :

import { Container, Button, Icon } from 'native-base'

i am not sure what is being taken there as a reserved word (remove the line will actually solve remove the specific error).

If the current behavior is a bug, please provide the steps to reproduce and either a repl.it demo through https://repl.it/languages/jest or a minimal repository on GitHub that we can yarn install and yarn test.

https://github.com/kanekotic/jest_syntax_error

What is the expected behavior?

the test to pass :P

Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.

"dependencies": {
    "native-base": "^0.5.12",
    "react": "^15.3.2",
    "react-native": "^0.39.2",
  },
  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "./__mocks__/setup.js"
    ]
  },
  "devDependencies": {
    "babel-eslint": "^7.1.0",
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "jest-react-native": "18.0.0",
    "react-test-renderer": "15.4.1",
    "whatwg-fetch": "2.0.1"
  }

[thymikee]

You're probably using Node 4. On Node 6 & 7 Babel supports better errors for this kind of issues:

import Drawer from './Components/vendor/react-native-drawer';
^^^^^^
SyntaxError: Unexpected token import

Not sure how we can fix this.
cc: @cpojer

[alvarolorentedev]

yes I was in 4.0 i have updated and got your same issue, i will update the first post, thanks :)

[rogeliog]

It seems that Jest is not transforming native-base. The React Native tutorial in the Jest website has a section about transformIgnorePatterns customization, which might be helpful

By default the jest-react-native preset only processes the project's own source files and react-native.

[thymikee]

Thank you @rogeliog!

[alvarolorentedev]

to leave it as reference If anyone else gets here the correct setting would be

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

tested and worked

[lucasbento]

I was having the same issue, shouldn't Jest ignore those transforms on react-native since they are all using ES6+?

[thymikee]

Ask the question on react native repo ;)

[lucasbento]

@thymikee: can you please elaborate how and why this question belongs to react native repo instead of here?

[thymikee]

Sure, react native maintains its preset, which you're probably using.

[sngs1]

\node_modules@yellowspot\ng-truncate\dist\index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export { TruncateModule, TRUNCATE_PIPES } from './truncate.module';
^^^^^^

SyntaxError: Unexpected token export

  16 | import { TruncateModule } from '@yellowspot/ng-truncate';
  17 | import { Angulartics2Module } from 'angulartics2';
> 18 | import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
  19 | import { ArchwizardModule } from 'angular-archwizard';
  20 |
  21 | library.add(fas, far); // Add all regular and solid Font Awesome icons -> TODO: Include only currently used icons in the library

at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
at Object. (src/main/webapp/app/shared/shared-libs.module.ts:18:21)
at Object. (src/main/webapp/app/shared/index.ts:16:22)

I have tried
transformIgnorePatterns: ['/node_modules/(?!@angular/common/locales)',
'/node_modules/(?!@yellowspot/ng-truncate)', '/node_modules/(?!ngx-logger/NgxLoggerLevel)'],

but didn't worked.. Any thoughts , thanks in advance

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.