Unexpected token import native-base-shoutem-theme/index.js:1

[Darex1991]

Hi ;) I have a big problem, I spend all day on fixing that and finding consensus between dependencies of few packages. I have problems with tests:

Users/Pien/Projects/react-native/node_modules/native-base-shoutem-theme/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle from './src/connectStyle';
                                                                                             ^^^^^^
    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/native-base/dist/src/index.js:1:1133)
      at Object.<anonymous> (app/index.js:18:96)

For now I searching good version of react, react-native, react-dom, native-base and react-test-renderer. I tried new one and little old one but sometimes I have this error, sometimes others.. I decided to fix this one because its problem with some newest version of these. My NPMs:

"babel-cli": "6.24.1", "react-native": "0.44.0", "native-base": "2.1.2", "react": "16.0.0-alpha.3", "react-test-renderer": "16.0.0-alpha.3"

node version 7.7.2 npm version 4.1.2

If you have other WORKING optional versions, please past me these or help fix this error ;) I thought I will be able to fix it comparing with react-native init, and there tests are working for me but on not on my project... I have no idea what can be wrong :/

I know it's little tricky but please help me ;)

EDIT: On version react-native 0.45.0 i have this error 💃

 ● Test suite failed to run

    TypeError: Cannot read property 'ReactCurrentOwner' of undefined

      at Object.<anonymous> (node_modules/react-native/Libraries/Renderer/src/renderers/shared/ReactGlobalSharedState.js:18:33)
      at Object.<anonymous> (node_modules/react-native/Libraries/Renderer/src/renderers/shared/ReactDebugTool.js:18:1)
      at Object.<anonymous> (node_modules/react-native/Libraries/Renderer/src/renderers/shared/ReactInstrumentation.js:19:20)

My old working versions, but I wanted to upgrade packages:

"babel-cli": "6.23.0" "react": "15.4.1", "react-native": "0.42.3", "native-base": "2.0.12", "react-addons-test-utils": "15.4.1",

[colbywhite]

713 seems related, but the suggested fix didn't resolve it for me.

[Darex1991]

@colbywhite tnx but the same like you.

[shivrajkumar]

@Darex1991 @colbywhite @shoutem/theme has been replaced with native-base-shoutem-theme

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
    ],
    "setupFiles": [
      "./test/setup.js"
    ]
  }

Did you try this

[Darex1991]

@shivrajkumar good idea. I will try this today or tomorrow and then I mention you :) Thx

[lsps9150414]

@shivrajkumar Hey, in your configs, is the setupFiles option required? I've tried adding these to my package.json:

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
    ]
  },

and get these errors:

> jest

 FAIL  ./App.test.js
  ● Test suite failed to run

    /Users/philipchen/GitHub/md/md-mobile/node_modules/expo/src/Expo.js:6
    import { NativeModules } from 'react-native';
    ^^^^^^
    SyntaxError: Unexpected token import

      at e (node_modules/jest-runtime/build/transform.js:321:12)
      at Object.<anonymous> (src/containers/AuthContainer.js:5:11)
      at Object.<anonymous> (src/navigators/Main.js:4:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.532s
Ran all test suites.

The only test I currently have is this:

import React from 'react';
import renderer from 'react-test-renderer';

import App from './App';

it('renders without crashing', () => {
  const rendered = renderer.create(<App />).toJSON();
  expect(rendered).toBeTruthy();
});

[lsps9150414]

Hey @Darex1991 Have you tried it yet? Any good news?

[Darex1991]

@lsps9150414 I tried this. Yes it helps with this error, but still, I got few others:

TypeError: window.addEventListener is not a function

      at Object.<anonymous> (node_modules/react-dom/lib/ReactDOMFrameScheduling.js:71:10)
      at Object.<anonymous> (node_modules/react-dom/lib/ReactDOMFiber.js:22:31)
      at Object.<anonymous> (node_modules/react-dom/index.js:3:18)

or

Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/react-dom/lib/ReactDebugTool.js:16:30)

[jackwzp]

I have the same issue. Any updates on this? It seems the setupFiles option doesn't work at all. jest test just fails silently with no output. When I remove setupFiles, I get errors.

Invariant Violation: Native module cannot be null.

      at invariant (node_modules/fbjs/lib/invariant.js:44:15)
      at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:31:1)
      at Object.<anonymous> (app/museListScreen.js:21:20)
      at Object.<anonymous> (app/tabNavigator.js:6:21)

Googling this error seem to suggest I need to have a mock but then I would need to use the setuptFiles option to setup the mocks properly. But whenever I use that option, jest test just does nothing in the terminal. Everything just returns and theres not output.

[iamvery]

I was able to get my test suite running by piecing together the responses above and in the referenced issue. Folks are correct in suggesting to use tranformIgnorePatterns. However, it seems that you often run into additional problems as you likely have additional libraries installed that must also be included in the list.

So for e.g. in my project, I had to also include "expo" and "react-navigation" in addition to "native-base-shoutem-theme". Unfortunately I don't full understand how Jest comes up with the default value for this option (which in my case appeared to work until I started using NativeBase). I would love if anyone could shed some light on this for me!

In summary, I was able to fix my problem with the following change to package.json in my project:

 "jest": {
-  "preset": "jest-expo"
+  "preset": "jest-expo",
+  "transformIgnorePatterns": [
+    "node_modules/(?!react-native|expo|react-navigation|native-base-shoutem-theme|@shoutem/theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
+  ]
 },

Which is similar to the above suggestions with the addition of expo|react-navigation| before native-base-shoutem-theme. Would love a better fix that doesn't require me to manually manage this option for each dependent library! Someone school me 💪

[dan-kez]

So I was able to get this to work using @iamvery 's suggestion however my test (a simple expectation of render) takes ~50 seconds to run. This is a massive slow down. After the first test it does get faster. That said, this can be mitigated if the published repo on npm was the transpiled code.

[SupriyaKalghatgi]

Please check this with NativeBase 2.3.3

[SupriyaKalghatgi]

Closing this issue due to inactivity Please reopen this if the issue continues

[iamvery]

Fwiw, I did try this against 2.2.3 and saw the same problem. Apologies for not posting back ❤️

[SupriyaKalghatgi]

@iamvery

Please check this with NativeBase 2.3.3

Please go through my statement

[iamvery]

My apologies! I misspoke in my response. However, to be certain I just tried again against 2.3.3 and still have errors. Specifically

SyntaxError: Unexpected token import

Thanks for responding!

[SupriyaKalghatgi]

@iamvery Please share your package.json

[iamvery]

https://gist.github.com/iamvery/4d4b0ef68cd1f2de81b858fe3a2d08c5

[Slessi]

I also have this problem with below package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-eslint": "^8.0.2",
    "eslint": "^4.12.0",
    "eslint-plugin-jest": "^21.3.2",
    "eslint-plugin-react": "^7.5.1",
    "eslint-plugin-react-native": "^3.2.0",
    "jest-expo": "23.0.0",
    "react-native-scripts": "1.8.0",
    "react-test-renderer": "16.0.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^23.0.4",
    "native-base": "^2.3.5",
    "prop-types": "^15.6.0",
    "react": "16.0.0",
    "react-native": "0.50.3",
    "react-navigation": "^1.0.0-beta.21"
  }
}

[fabriziocacicia]

I have this problem too, with almost the same package.json of Slessi, but with a different "jest" instead:

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

[wbusby88]

I almost had it with iamvery 's suggestion, I added the following and got it working on mine:

module.exports = {
    preset: "jest-expo",
    "transformIgnorePatterns": [
        "node_modules/(?!react-native|native-base|expo|@expo|react-navigation|native-base-shoutem-theme|@shoutem/theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
    ],
};

[ghost]

after apply this config:

module.exports = {
    preset: "jest-expo",
    "transformIgnorePatterns": [
        "node_modules/(?!react-native|native-base|expo|@expo|react-navigation|native-base-shoutem-theme|@shoutem/theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
    ],
};

that config was working good on issues of native-base test, but after apply that config, I got many error from another dependencies on node_module :(

[noahtallen]

Also getting this issue when running npm test with the following package.json

{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.3.3",
    "react": "16.0.0",
    "react-native": "0.50.1",
    "react-native-fbsdk": "^0.6.3",
    "react-native-firebase": "^3.0.6",
    "react-native-google-signin": "^0.12.0",
    "react-native-material-bottom-navigation": "^0.6.1",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation": "^1.0.0-beta.19"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

[akhil-ga]

@ntomallen can you try shivraj's suggestion

[noahtallen]

I've been messing around with that here, and I'm now getting the error from my react-native-firebase module instead of from native-base. So basically, the way this is working is that any of the modules inside the rexep pattern (e.g. "...?!react-native|native-base") would get transpiled so that it understands the 'import' command. Thing is, even when I add react-native-firebase to that rexep pattern, I still get the same error. So is Jest not transpiling it? It's an identical error, the "unexpected token import" one, just now it shows up in the other module. This is what it looks like now. I just kind of added all of the packages relating to firebase to the pattern.

"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-native-firebase|react-native-google-signin|react-native-fbsdk|native-base|native-base-shoutem-theme|@shoutem/theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
  ]
}

[jonmiles]

@ntomallen Did you get anywhere with this issue; react-native-firebase import?

I've run into the same issue, took the same approach to add react-native-firebase to transformIgnorePatterns and I have the same issue which I still can not resolve.

[noahtallen]

I actually did not... I didn't have time to keep troubleshooting since it wasn't a huge priority for our team! I still need to figure it out at some point. I think that react-native-firebase needs to be mocked? That's the impression I was getting from the research I did. I suppose that makes sense since it relies on the connection to google and whatnot

[archywillhe]

Fixed the error complaining about import with transformIgnorePatterns but then i ran into error about

 SyntaxError: Invalid or unexpected token

for my expo packages

/Users/a/ArchyBox/lateJan/Archy/node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){

[cuibonobo]

I was also having this problem and adding a transformPatterns entry to my jest configuration with the problematic modules was the solution. Here's what it ended up looking like:

"jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!native-base-shoutem-theme|react-native-easy-grid|react-native|react-navigation|expo)"
    ]
  }

I started by adding the native-base-shoutem-theme module, and then I ran my tests again. Then it complained about react-native-easy-grid, so I added that module to the list... And I kept doing that until it stopped complaining. I figured I would document my process here so that folks could figure out for themselves what needs to go into that regex, depending on the needs of their project.