This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to Simulate events - Click, Change, Key Up, Mouse Over etc.
Example
Observe below example component. This component handles click, double click, mouse over, change events.
import React from 'react'; class EventComponent extends React.Component { constructor(props) { super(props); this.state = { clickClass:'', dblClickClass:'', mouseOverEventClass:'', inputVal:'' } this.clickEventFunc = this.clickEventFunc.bind(this); this.dblClickEventFunc = this.dblClickEventFunc.bind(this); this.onChange = this.onChange.bind(this); this.mouseOverEventFunc = this.mouseOverEventFunc.bind(this); } clickEventFunc() { this.setState({ clickClass:'click-class' }); } dblClickEventFunc() { this.setState({ dblClickClass:'dblclick-class' }); } mouseOverEventFunc() { this.setState({ mouseOverEventClass:'mouseover-class' }); } onChange(event) { this.setState({ inputVal:event.target.value }); } render () { return <div> <div id="clickEventDiv" className={this.state.clickClass} onClick={this.clickEventFunc}> </div> <div id="dblClickEventDiv" className={this.state.dblClickClass} onDoubleClick={this.dblClickEventFunc}> </div> <div id="mouseOverEventDiv" className={this.state.mouseOverEventClass} onMouseOver={this.mouseOverEventFunc}> </div> <input id="inputElm" value={this.state.inputVal} onChange={this.onChange}></input> </div>; } } EventComponent.propTypes = { } EventComponent.defaultProps = { } export default EventComponent;
Find Component by ID
This is small utility function which we use to find element by Id
function scryRenderedDOMComponentsWithId(tree, id) { return ReactTestUtils.findAllInRenderedTree(tree, function(inst) { return ReactTestUtils.isDOMComponent(inst) && inst.id === id; }); }
Click Event
When we click on the clickEventDiv component, click-class will be added. This test case verifies the class
it('click event test', () => { let instance = ReactTestUtils.renderIntoDocument( <EventComponent/> ); let clickDiv = scryRenderedDOMComponentsWithId(instance, "clickEventDiv"); ReactTestUtils.Simulate.click(clickDiv[0]); expect(clickDiv[0].className.match(/\bclick-class\b/)).toExist(); });
Double Click Event
When we double click on the dbClickEventDiv component, dblclick-class will be added. This test case verifies the class
it('double click event test', () => { let instance = ReactTestUtils.renderIntoDocument( <EventComponent/> ); let dbClickDiv = scryRenderedDOMComponentsWithId(instance, "dblClickEventDiv"); ReactTestUtils.Simulate.doubleClick(dbClickDiv[0]); expect(dbClickDiv[0].className.match(/\bdblclick-class\b/)).toExist(); });
Mouse Over Event
When we double click on the mouseOverEventDiv component, mouseover-class will be added. This test case verifies the class
it('mouser over event test', () => { let instance = ReactTestUtils.renderIntoDocument( <EventComponent/> ); let mOverDiv = scryRenderedDOMComponentsWithId(instance, "mouseOverEventDiv"); ReactTestUtils.Simulate.mouseOver(mOverDiv[0]); expect(mOverDiv[0].className.match(/\bmouseover-class\b/)).toExist(); });
Change Event
When we change the input value of inputElm component, inputVal state variable changes. This test case verifies the state variable
it('change event test', () => { let instance = ReactTestUtils.renderIntoDocument( <EventComponent/> ); let inputElm = scryRenderedDOMComponentsWithId(instance, "inputElm"); inputElm[0].value = 'some value'; ReactTestUtils.Simulate.change(inputElm[0]); expect(instance.state.inputVal).toEqual("some value"); });
Even all types of assignment and projects papers are available at online. You can collect your writing papers with our online address. The high range and popular types of examples are discussed with their graduates. The best essay writing service is submitting interviews related essays, resume papers, application essay papers etc are available at online
ReplyDeleteThis example is very well-turned in this case. I think that such guides are very helpful for wide public. In my case one hour translation review was the best choice. When we change the input value of inputElm component, inputVal state variable changes. This test case verifies the state variable as we can see above.
ReplyDelete