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

Question

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

TabSystem:有一个方法来改变currentTab的状态，这个方法在tab组件中作为prop呈现每个tab。

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

选项卡:再次接收到onClick prop的父方法。

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

测试这个方法的最好方法是什么?我是否需要在所有组件中使用有效的方法?

Answer 1

我写了一个测试库，抽象了React的测试工具。https://github.com/Legitcode/tests您可以这样做:

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

你明白了，希望对你有所帮助。