小编Yi *_*Ren的帖子

我是Mocha的新手,我正在尝试用它来测试一个简单的React组件.如果react组件没有任何CSS样式,则测试将通过,但如果React组件中的标记包含任何className,则会抛出语法错误:

Testing.react.js

import React from 'react';

export default class Testing extends React.Component {
  render() {
    return (
      <section>
        <form>
          <input type="text" />
        </form>
      </section>
    );
  }
}

testing.jsx

import {
  React,
  sinon,
  assert,
  expect,
  TestUtils
} from '../../test_helper';

import TestingSample from '../../../app/components/Testing.react.js';

describe('TestingSample component', function(){
    before('render and locate element', function(){
        var renderedComponent = TestUtils.renderIntoDocument(
            <TestingSample />
        );

        var inputComponent = TestUtils.findRenderedDOMComponentWithTag(
            renderedComponent, 'input'
        );

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

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

我正在编写一个反应组件，当单击前进handleClickLeft或后退 handleClickRight按钮时，它会向前或向后循环遍历数组。我通过使用模逻辑来做到这一点。我能够让前进按钮handleClickLeft正常工作，但我不知道如何反向操作handleClickRight。这是我的示例代码：

export default class Rooms extends React.Component {
   constructor(props, context) {
      super(props, context);
      this.state = {indexPos: [0, 1, 2]};
      this.state.itemArry = [{room1: 'this is room1'}, {room2: 'this is room2'}, {room3: 'this is room3'}, {room4: 'this is room4'}];

      this.handleClickLeft = this.handleClickLeft.bind(this);
      this.handleClickRight = this.handleClickRight.bind(this);
   }
   render() {   //Using index to show each item in the itemArry
      let firstItem = this.state.indexPos[0]
      let secondItem = this.state.indexPos[1]
      let thirdItem = this.state.indexPos[2]       
      <div>
         <ul>
           <li>this.state.itemArry[firstItem]</li>
           <li>this.state.itemArry[secondItem]</li>
           <li>this.state.itemArry[thirdItem]</li> …