我试图测试小反应成分。以下组件是一个选项卡系统,单击选项卡时,更改选项卡的className被单击。它正在工作,但我想测试它们,我不知道如何测试遍历许多组件的方法。我把代码放在上面。
TabSystem:有一个更改currentTab状态的方法,此方法在标签组件中作为prop,呈现每个标签。
React.createClass({
....
handleClick (currentTab) {
this.setState({ currentTab })
},
render () {
return (
<div>
<Tabs tabs = {tabs2} currentTab = {this.state.currentTab} onClick = {this.handleClick}/>
</div>
)
}
});
选项卡:接收到onClick prop的父方法,此方法作为支持到选项卡组件,我的目标是仅在选项卡的名称中添加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>
)
}
});
测试此方法的最佳方法是什么?我是否需要在所有组件中使用效果良好的方法?
答案 0 :(得分:2)
我写了一个测试库,它提取了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');
})
你明白了,希望这会有所帮助。