testing - What is the best way to test methods that traverse the react components -


i have tried test small react components. following component tab system when click tab, change classname of tab clicked. working want test them , dont know how steps test method traverse lot of components. put code above.

tabsystem: has method change currenttab state, method prop in tabs component renders each tab.

react.createclass({   ....   handleclick (currenttab) {     this.setstate({ currenttab })   },    render () {     return (       <div>         <tabs tabs = {tabs2} currenttab = {this.state.currenttab} onclick = {this.handleclick}/>       </div>     )   } }); 

tabs: receive onclick prop parent method, method prop tab component, goal add onclick method in name of 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>     )   } }); 

tab: receive again onclick prop parent method.

react.createclass({   render () {     return (       <span classname={this.props.classname} onclick={this.props.onclick}>         {this.props.name}       </span>     )   } }); 

what best way test method? need in components method works well?

i wrote testing library abstracts react's test utils. https://github.com/legitcode/tests can like:

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

you idea, helps.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -