mardi 21 juin 2016

React unit test using mocha and jsdom failing

I am doing a basic unit testing for React using mocha and jsdom.

Here's my code :

var React = require('react/addons'),
    assert = require('assert'),
    TodoItem = require('../app/components/todo-item.jsx'),
    TestUtils = React.addons.TestUtils;

describe('Todo-item component', function(){
  before('render and locate element', function() {
    var renderedComponent = TestUtils.renderIntoDocument(
      <TodoItem done={false} name="Write Tutorial"/>
    );

    // Searching for <input> tag within rendered React component
    // Throws an exception if not found
    var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
      renderedComponent,
      'input'
    );

    this.inputElement = inputComponent.getDOMNode();
  });

  it('<input> should be of type "checkbox"', function() {
    assert(this.inputElement.getAttribute('type') === 'checkbox');
  });

  it('<input> should not be checked', function() {
    assert(this.inputElement.checked === false);
  });

});

The React code for TodoItem is:

var React = require('react');

module.exports = React.createClass({
  displayName: 'TodoItem',

  getInitialState: function() {
    return { done: this.props.done }
  },

  render: function() {
    return (
      <label>
        <input type="checkbox" defaultChecked={this.state.done} />
        {this.props.name}
      </label>
    );
  }
});

I get an error saying undefined token:

Unexpected token (10:6)
   8 |   before('render and locate element', function() {
   9 |     var renderedComponent = TestUtils.renderIntoDocument(
> 10 |       <TodoItem done={false} name="Write Tutorial"/>
     |       ^
  11 |     );
  12 | 
  13 |     // Searching for <input> tag within rendered React component

What's that I am doing wrong. I am trying to follow the tutorials.

Aucun commentaire:

Enregistrer un commentaire