我试图测试小型react组件。下面的组件是一个选项卡系统，当点击一个选项卡时，改变被点击的选项卡的类名。它正在工作，但我想测试它们，我不知道测试遍历大量组件的方法的步骤如何。我把代码放在上面。

TabSystem：有一个方法来改变当前的Tab 状态，这个方法作为渲染每个选项卡的选项卡组件中的props。

React.createClass({
  ....
  handleClick (currentTab) {
    this.setState({ currentTab })
  },

  render () {
    return (
      <div>
        <Tabs tabs = {tabs2} currentTab = {this.state.currentTab} onClick = {this.handleClick}/>
      </div>
    )
  }
});

Tabs：接收到 onClick prop 的父方法，这个方法作为 prop into tab 组件，我的目标是只在 tab 的名称中添加 onClick 方法。

React.createClass({
  ...
  renderTabs () {
    return this.props.tabs.map((tab, index) => {
      var classname = index === this.props.currentTab ? 'active' : null;
      var clickHandler = this.props.onClick.bind(null, index);
      return (
        <Tab key={tab.name} onClick={clickHandler} index={index} className={classname} name={tab.name}/>
      )
    })
  },
  render () {
    return (
      <div>
        {this.renderTabs()}
      </div>
    )
  }
});

Tab：再次接收到 onClick prop 的父方法。

React.createClass({
  render () {
    return (
      <span className={this.props.className} onClick={this.props.onClick}>
        {this.props.name}
      </span>
    )
  }
});

测试此方法的最佳方法是什么？我是否需要在所有组件中都使用有效的方法？