使用mocha和jsdom失敗的反應單元測試

Question

我正在使用mocha和jsdom對React進行基本單元測試。

這是我的代碼：

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);
  });

}）;

TodoItem的React代碼是：

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>
    );
  }
});

我收到一個錯誤說未定義的令牌：

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

我使用的gulpfile如下：

gulp.task('test', function() {
  gulp.src('./tst/**/*.js')
  .pipe(mocha({
    reporter: 'spec',
    compilers: {
      js: require('babel-core/register')
    }
  }));
});

我做錯了什么 我正在嘗試按照教程。

Answer 1

我剛從鏈接教程中的package.json中復制了這個。 嘗試像這樣運行你的測試：

mocha test/**/*-test.js --compilers js:babel-core/register --recursive