[React-Native] SyntaxError: Unexpected token import

[calcazar]

Jest v21.2.0 Enzyme v3 React v16 React-native v0.48.4

I'm getting the following error when I import Shallow from enzyme like so:

import { shallow } from 'enzyme';
import React from 'react';
import Index from '../index.ios.js';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

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

Error:

    import React from 'react';
    ^^^^^^
    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.get StackNavigator [as StackNavigator] (node_modules/react-navigation/src/react-navigation.js:27:12)
      at Object.<anonymous> (index.ios.js:31:56)

[ljharb]

Sounds like you're not transpiling with babel?

[cblair]

You'll need to tell babel-jest to transpile that node module, all are disabled by default. Couple different ways to do this:

.babelrc

"env": {
    "test": {
      "presets": ["env", "react", "stage-2"],
      "plugins": ["transform-export-extensions"],
      "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]
    }
  }
}

package.json

"jest" : {
    "transform": {
      "^.+\\.js?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "!node_modules/react-runtime"
    ]
  },

[ljharb]

Not an issue with enzyme.

[temilolu]

Hello, I had the same issues. So far I did this and it worked for me.

import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Search from '../Components/Search';

configure({ adapter: new Adapter() });

test('Search snapshot test', () => {
    const component = shallow(<Search />);
    expect(component).toMatchSnapshot();
});

[adnanaliarshad]

Having same issue above solutions didn't work. Please suggest a solution for following issue.

https://stackoverflow.com/questions/49691099/syntaxerror-unexpected-token-import-with-jest-react-native-animated-ellipsis

[jeff1evesque]

I tried some suggestions in this issue, namely adding "^.+\\.js?$": "babel-jest" to the package.json:

{
  "name": "reactjs",
  "version": "1.0.0",
  "description": "packages needed for source files.",
  "main": "index.js",
  "scripts": {
    "build:browserify": "browserify -t [ babelify --presets env,stage-2,react ] /var/machine-learning/src/jsx/content.jsx > /var/machine-learning/interface/static/js/content.js",
    "prebuild:dos2unix": "find /var/machine-learning/src/jsx -type f -print0 | xargs -0 dos2unix",
    "watch:jsx": "onchange '/var/machine-learning/src/jsx/**/*.jsx' '/var/machine-learning/src/jsx/**/*.js' -- npm run build:browserify",
    "test": "jest --config /var/machine-learning/test/jest/jest.config.js"
  },
  "author": "Jeffrey Levesque",
  "license": "BSD",
  "repository": "github:jeff1evesque/machine-learning",
  "dependencies": {
    "dos2unix-cli": "^1.0.1",
    "babelify": "^8.0.0",
    "browserify": "^16.2.0",
    "onchange": "^3.3.0",
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-jest": "^22.4.3",
    "core-js": "^2.5.4",
    "whatwg-fetch": "^2.0.2",
    "promise-polyfill": "^7.0.0",
    "query-string": "^5.0.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "react-redux": "^5.0.6",
    "react-bootstrap": "^0.32.0",
    "react-router-bootstrap": "^0.24.4",
    "react-rangeslider": "^2.2.0",
    "redux": "^3.7.2",
    "rearm": "^0.8.2",
    "d3": "^4.12.2",
    "prop-types": "15.6.0",
    "react-json-view": "1.16.0",
    "jest-cli": "^22.4.3",
    "react-native": "^0.55.3"
  },
  "jest" : {
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  }
}

---

module.exports = {
  'verbose': true,
  'collectCoverage': true,
  'coverageDirectory': '/var/machine-learning',
  'moduleDirectories': [
      '/var/machine-learning/src/node_modules',
      '/var/machine-learning/src/node_modules/jest-cli/node_modules'
  ],
  'transformIgnorePatterns': [
    '/var/machine-learning/src/node_modules'
  ],
  "moduleFileExtensions": [
    "jsx",
    "js"
  ]
}

---

However, when i run my script, I am getting SyntaxError: Unexpected token import:

root@browserify:/var/machine-learning/src# npm run test

> reactjs@1.0.0 test /var/machine-learning/src
> jest --config /var/machine-learning/test/jest/jest.config.js

 FAIL  ../test/jest/__tests__/layout/analysis.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/analysis.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/layout/page.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/page.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/register.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/register.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/login.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/login.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 4 failed, 4 total
Tests:       0 total
Snapshots:   0 total
Time:        3.609s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactjs@1.0.0 test: `jest --config /var/machine-learning/test/jest/jest.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactjs@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-05-09T00_46_18_496Z-debug.log

Note: if anyone wants to keep track of the original issue regarding the above problem.

[priyankaunigps]

I tried some suggestions in this issue: actually i was running a git hub code but it was not running and this error is shown my visual studio screen please help us... /home/priyanka/git/react-native-ui-kitten/src/components/calendar/common/rkCalendarMonthHeader.component.js:1 (function (exports, require, module, filename, dirname) { import React from 'React'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:616:28) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Function.Module.runMain (module.js:693:10) at startup (bootstrap_node.js:191:16)

[dfenske]

I am also getting errors like this in my node js app. The tests have been running fine, and they run with the same code on my colleagues machines, but now I am getting this error.

 FAIL  api/__tests__/blogApi.test.js
  ● Test suite failed to run

    C:\git\cost-of-living-web\testSetup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Enzyme from 'enzyme';
                                                                                                    ^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:451:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:493:19)

I have had this error in the past (again, only on my machine), and was only able to resolve it by uninstalling and reinstalling node/npm/yarn. This did not solve the problem this time though. It makes me think that the issue is not with .babelrc since it works on my colleagues machines. Any ideas?

[ljharb]

It could be with jest, and the precise layout of node_modules, which is often different on windows.

[dfenske]

My coworker has the same windows machine I do and it works on hers :/

[paul-3]

I am also getting errors like this in my node js app. The tests have been running fine, and they run with the same code on my colleagues machines, but now I am getting this error.

 FAIL  api/__tests__/blogApi.test.js
  ● Test suite failed to run

    C:\git\cost-of-living-web\testSetup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Enzyme from 'enzyme';
                                                                                                    ^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:451:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:493:19)

I have had this error in the past (again, only on my machine), and was only able to resolve it by uninstalling and reinstalling node/npm/yarn. This did not solve the problem this time though. It makes me think that the issue is not with .babelrc since it works on my colleagues machines. Any ideas?

i had the same problem like u. Did u resolve this?