This is the child article of ReactTestUtils - Tutorial. In this article, I will explain how to Verify Function Calls with 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]);
});

7 comments:

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

      Delete
  2. This was an terrific post. Thanks for providing these details.
    buy logo design

    ReplyDelete
  3. I am very happy after visiting your website with very useful information. I am from one of the digital marketing agency... To visit my agency click on link Visitdigitalguru

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts