Reactjs 测试遍历react组件的方法的最佳方法是什么

我试过测试小部件。下面的组件是一个选项卡系统，当单击选项卡时，更改所单击选项卡的类名。它正在工作，但我想测试它们，我不知道如何测试一个遍历许多组件的方法。我把代码放在上面

TabSystem：有一种更改当前选项卡状态的方法，该方法作为选项卡组件中的道具呈现每个选项卡

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

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

React.createClass({
....
handleClick（当前选项卡）{
this.setState（{currentTab}）
},
渲染（）{
返回(
)
}
});

Tabs：将父方法接收到onClick prop中，该方法作为prop-into-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>
    )
  }
});

React.createClass({
...
renderTabs（）{
返回此.props.tabs.map（（选项卡，索引）=>{
var classname=index==this.props.currentTab？“活动”：null；
var clickHandler=this.props.onClick.bind（null，index）；
返回(
)
})
},
渲染（）{
返回(
{this.renderTabs（）}
)
}
});

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

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

React.createClass({
渲染（）{
返回(
{this.props.name}
)
}
});

---

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

我编写了一个测试库，该库抽象了React的测试实用程序。您可以执行以下操作：

Test(<TestComponent />)
.find('button')
.simulate({method: 'click', element: 'button'})
.element(button => {
  expect(button.props.className).to.be.equal('blah');
})

Test（）
.find（'按钮'）
.simulate（{method:'click'，element:'button'}）
.element（按钮=>{
expect（button.props.className）.to.be.equal（'blah'）；
})

你明白了，希望这会有帮助