React: SyntaxError: Unexpected identifier {import React from 'react';

[AlexKund]

Hi,
I am using React in Ruby project with react_on_rails gem
Everything is ok, but when I start Jest test this error appears:
● Test suite failed to run

/Users/alexandar/projects/ezeewallet.com/app/javascript/bundles/DatePicker/DatePickerRange.jsx:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import PropTypes from 'prop-types';
                                                                                                     ^^^^^^^^^

    SyntaxError: Unexpected identifier

      at new Script (vm.js:80:7)
      at Object.<anonymous> (spec/javascripts/member/DatePicker.spec.js:15:24)

package.json:

 "devDependencies": {
    "add": "^2.0.6",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.0.2",
    "babel-jest": "^23.6.0",
    "babel-plugin-module-resolver": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^1.0.0",
    "enzyme": "^3.2.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^21.2.1",
    "jest-transform-stub": "^1.0.0",

  },
  "scripts": {
    "lint": "eslint --ext=js --ext=jsx  ./app",
    "test": "jest --setupTestFrameworkScriptFile=raf/polyfill"
  },
  "jest": {
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/spec/javascripts/__mocks__/fileMock.js",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    },
    "roots": [
      "spec/javascripts"
    ],
    "moduleDirectories": [
      "node_modules",
      "app/javascript/bundles",
      "spec/javascripts/helpers"
    ],
    "setupFiles": [
      "./spec/javascripts/setup-jest.js"
    ]
  }

.babelcr:

{
  "presets": [["env", {"modules": false}], "react"],
  "env": {
    "test": {
      "presets": [["env"], "react"]
    }
  },
  "plugins": [
    ["module-resolver", {"root": ["./app/javascript"], "alias": {}}],
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", {"spec": true}]
  ]
}

Am I missing something?

Regards,
Alex

[titouancreach]

Maybe be try to compile your modules to commonjs with {"modules": "cjs"} in your .babelrc ?

[gaearon]

Hi, we use this issue tracker for bugs in React itself. In your case indeed it looks like ES Modules syntax isn't getting compiled. Maybe it would help to change

  "presets": [["env", {"modules": false}], "react"],

to

  "presets": [["env", {"modules": true}], "react"],

?

Regardless please use https://reactjs.org/community/support.html for support resources. Thanks!

[AlexKund]

Iv forgotten to add x for jsx files in package json:
"jest": { "transform": { "^.+\\.jsx?$": "babel-jest" }

now everything is ok