CODEWITHSUNDEEP
reactjs
eugenekgn
eugenekgn

Reputation: 1722

ReactJs: Unexpected token Error

I am running this tests using Mocha with following configuration in my npm package.json 

 "scripts": {"test": "mocha './app/**/*.spec.js' --compilers js:babel-core/register"}

and this results in the following error

employeeGrid.row.spec.jsx: Unexpected token (8:12)

Notice that line 8:12 is the following: return (<tr>

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect-jsx';
//import GridRow from './employeeGrid.row.jsx'

class GridRow extends React.Component {
  render() {
    return (<tr>
      <td>{this.props.employee.name}</td>
      <td>{this.props.employee.position}</td>
      <td>{this.props.employee.yearStarted}</td>
    </tr>)
  }
}
describe('Grid Row', () => {
  it('Row Actions Test', ()=> {
    let employee = {
      "name": "Person",
      "position": "Software Engineer",
      "yearStarted": 2010
    };

    // shallow render
    // renders only one level deep
    const renderer = TestUtils.createRenderer();
    renderer.render(<GridRow employee={employee}/>);
    const output = renderer.getRenderOutput();
    console.log(output);
  });
});

Any idea what I am doing wrong?

Upvotes: 1

Views: 573

Answers (1)

rossipedia
rossipedia

Reputation: 59427

With babel 6.0, JSX is no longer processed by default, nor is it processed with the es2015 preset. You need to use the react preset specifically to get the appropriate JSX transforms:

$ npm install babel-preset-react

and in your .babelrc:

{
   "presets": ["es2015", "react"]
}

Upvotes: 1

Related Questions