ReactTestUtils - Verify Function Calls

This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to Verify Function Calls with examples.

Source Code - Examples

Example

Here we pass clickFunc and dblClickFunc as properties, now we have to check whether these functions were called or not.

import React from 'react';

class FuncComponent  extends React.Component {

    constructor(props) {
        super(props);
        this.dblClickEventFunc = this.dblClickEventFunc.bind(this);
    }

    dblClickEventFunc() {
        this.props.dblClickFunc('this is some sample arg value');
    }

    render () {
   return <div>
      <div id="clickEventDiv" onClick={this.props.clickFunc}>
      </div>
      <div id="dblClickEventDiv" onDoubleClick={this.dblClickEventFunc}>
      </div>
    </div>;
    }

}

FuncComponent.propTypes = {
  clickFunc:React.PropTypes.func,
  dblClickFunc:React.PropTypes.func
}

FuncComponent.defaultProps = {

}

export default FuncComponent;

Verify Function Call

Here done callback has to be called at end of the test. Whenever you simulate the click event, clickFunction will be called. clickFunction will call done callback function, so the test will end with success message

it('function call on click test', (done) => {
    let clickFunction = () => {
      done();
    };
    let instance = ReactTestUtils.renderIntoDocument(
      <FuncComponent clickFunc={clickFunction}/>
    );
    let clickDiv = scryRenderedDOMComponentsWithId(instance, "clickEventDiv");
    ReactTestUtils.Simulate.click(clickDiv[0]);
});

Verify Function Argument

Whenever you simulate double click event, dblClickFunction will be called with argument. Here we are checking that argument value in dblClickFunction, then calling done callback function.

it('function argument verification on double click test', (done) => {
    let dblClickFunction = (arg) => {
      expect(arg).toEqual('this is some sample arg value');
      done();
    };
    let instance = ReactTestUtils.renderIntoDocument(
      <FuncComponent dblClickFunc={dblClickFunction}/>
    );
    let clickDiv = scryRenderedDOMComponentsWithId(instance, "dblClickEventDiv");
    ReactTestUtils.Simulate.doubleClick(clickDiv[0]);
});

Unknown11 February 2021 at 05:05

IEEE Final Year Project centers make amazing deep learning final year projects ideas for final year students Final Year Projects for CSE to training and develop their deep learning experience and talents.

IEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation.

corporate training in chennai corporate training in chennai

corporate training companies in india corporate training companies in india

corporate training companies in chennai corporate training companies in chennai

I have read your blog its very attractive and impressive. I like it your blog. Digital Marketing Company in Chennai Project Centers in Chennai

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

SodhanaLibrary