ReactTestUtils - Simulate events - Click, Change, Mouse Over etc

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.

Examples - Source Code

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:

addirigib2 January 2017 at 22:29
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
Jessica Ellis12 January 2018 at 04:14
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.
John ALia16 January 2019 at 02:11
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
D. James Anderson17 April 2019 at 10:00
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
Peter23 May 2019 at 11:43
Spread the news on the data channels that your gathering of people employments. http://eddyleisure.com/stage-hire-leeds/
Carol Spencer24 September 2019 at 04:53
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.
Ciana Langham4 October 2019 at 04:39
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.
sk5 October 2019 at 04:17
Thanks for sharing the info, keep up the good work going.... I really enjoyed exploring your site. good resource...home depot survey
Steven6 October 2019 at 07:59
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
D. James Anderson15 April 2020 at 02:35
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
AlanBarlow24 March 2021 at 23:32
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

Susan19 April 2021 at 20:49
The latest Tweets from Celebrity birthdays with 22 million users visit our website each month.

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary