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

12 comments:

  1. 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

    ReplyDelete
  2. This 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
  3. Video games are a great way to spend time with your kids. Today kids really enjoy playing video games. If you feel like you aren't getting enough quality time with your children, play video games with them. Show interest in what they are interested in and you can grow your relationship.
    free TV Paint Animation 11.0.8 Crack
    free AVS Video Editor 8.1.1 Crack

    ReplyDelete
  4. The instruments and materials that you should total the activity are a cover, a couple of gloves, eye insurance, solid paint, solid preliminary, a paint plate, a paint brush, drawing corrosive, tri sodium phosphate (TSP), pressure driven concrete, basin , mop and a scour brush.Chape Braspenning: Chape voor Nieuwbouw of Renovatie

    ReplyDelete
  5. Spread the news on the data channels that your gathering of people employments. http://eddyleisure.com/stage-hire-leeds/

    ReplyDelete
  6. Thanks for posting this example. It's a great idea for me. To add to it, my History Essay Example can be interesting for your readers. You can use it if you need.

    ReplyDelete
  7. Hi there! If you see that you have no time for writing papers then it's tiem to apply to the professor essays It is one of the best writing services that helps people from all over the world.

    ReplyDelete
  8. Thanks for sharing the info, keep up the good work going.... I really enjoyed exploring your site. good resource...home depot survey

    ReplyDelete
  9. Saying this doesn't imply that we ought to go to the next extraordinary and go to administrations at a congregation that doesn't accept or show the Bible or presents a bogus gospel since it offers 12 PM benefits on Christmas Eve. Khabib Nurmagomedov

    ReplyDelete
  10. The concrete deck is there to remain and when you proceed onward at some stage, the new proprietors will have the option to appreciate the numerous advantages this sort of ground surface gives.Chape

    ReplyDelete
  11. I can say I understood a few parts but need to go into more deep to fully understand how it works and what you get from this. Need a custom logo what are you waiting for just click below:
    buy logo

    ReplyDelete
  12. Such a amazing post, thanks for sharing it with us,

    law dissertation Writers

    ReplyDelete

Blogroll

Popular Posts