测试遍历反应成分的方法的最佳方法是什么 [英] What is the best way to test methods that traverse the react components

问题描述

我尝试测试小的反应组件.以下组件是一个标签系统，单击该标签时，更改单击该标签的className.它正在工作，但是我想测试它们，但我不知道测试遍历许多组件的方法的步骤如何.我把代码放在上面.

I have tried to test small react components. The following component is a tab system that when click a tab, change the className of the tab was clicked. It is working but I want to test them and I dont know how is the steps to test a method that traverse a lot of components. I put the code above.

TabSystem:具有一种更改currentTab状态的方法，该方法作为呈现每个标签的标签组件中的道具.

TabSystem: Has a method to change the currentTab state, this method is as prop in the tabs component that renders each tab.

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

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

制表符:将onparent父方法接收到onClick属性中，该方法作为在选项卡组件中的属性，我的目标是仅在选项卡名称中添加onClick方法.

Tabs: Receive into onClick prop the parent method, this method is as prop into tab component, my goal is to add the onClick method only in the name of the tab.

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属性中.

Tab: Receive again into onClick prop the parent method.

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

测试此方法的最佳方法是什么?我是否需要在所有组件中都能正常工作的方法?

What is the best way to test this method? Do I need in all components the method that works well?

推荐答案

我写了一个测试库来抽象化React的测试工具. https://github.com/Legitcode/tests 您可以执行以下操作:

I wrote a testing library that abstracts React's test utils. https://github.com/Legitcode/tests You can do something like:

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

您知道了，希望对您有所帮助.

You get the idea, hopefully that helps.

这篇关于测试遍历反应成分的方法的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！