Unexpected token = in Mocha react tests

Question

I test my React components with Mocha, and when I run npm test I got exception

SyntaxError: /Users/igunchenko/WorkProjects/Cloud_App/cloud.webapp/cloud.webapp.web/src/main/ui/app/DOM/pages/AdminPanel.js: Unexpected token (18:10)
16 | @connect()
17 | export class AdminPage extends Component {
18 |     state = {
   |           ^  

In .babelrc i describe presets and plugins for my react app:

{
  "presets": [ "es2015", "stage-2", "react"],
  "plugins": ["transform-decorators"]
}

But, nothing changes. What I lost in my configs? And how this problem can be solved?

Answer 1

It should look more like;

 export default class AdminPage extends React.Component { constructor() { super(); this.state = {something: ''}; } 

Answer 2

you can try the following. It helped me. Add this to ".babelrc"

  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"],

And this to your "package.json" DevDepedencies

"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-0": "^6.3.13",

Then update your project with "npm i" Hope it'll help.

Answer 3

You're just applying the transform plugin while leaving out the syntax of decorators. You can do,

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": ["syntax-decorators", "transform-decorators"]
}

or, As of this writing, The "Class and Property Decorators" are in Stage 1. https://github.com/tc39/proposals

So you can use

{
  "presets": ["es2015", "stage-1", "react"]
}