Nsryjdtyk

I have a react function which renders a component according to the value of props being passed. The function looks as shown below:

 getPhoneComp() {

    if (this.props.contactDetails.countPhone === 1)

      return (<PhoneComp contactDetails={this.props.contactDetails.phoneSet[0]} contactId={this.props.contactDetails.contactId} errorHandler={this.props.errorHandler} updateMobileNo={this.props.updateMobileNo} />);

    else if (this.props.contactDetails.countPhone === 2) {

      return (

        <div>

          <div className={classes.sceESpace}><PhoneComp contactDetails={this.props.contactDetails.phoneSet[0]} contactId={this.props.contactDetails.contactId} errorHandler={this.props.errorHandler} updateMobileNo={this.props.updateMobileNo} /></div>

          <div className={classes.sceESpace}><PhoneComp contactDetails={this.props.contactDetails.phoneSet[1]} contactId={this.props.contactDetails.contactId} errorHandler={this.props.errorHandler} updateMobileNo={this.props.updateMobileNo} /></div>

        </div>

      );



    } else if (this.props.contactDetails.countPhone === 3) {

      return (

        <div>

          <div className={classes.sceESpace}><PhoneComp contactDetails={this.props.contactDetails.phoneSet[0]} contactId={this.props.contactDetails.contactId} errorHandler={this.props.errorHandler} updateMobileNo={this.props.updateMobileNo} /></div>

          <div className={classes.sceESpace}><PhoneComp contactDetails={this.props.contactDetails.phoneSet[1]} contactId={this.props.contactDetails.contactId} errorHandler={this.props.errorHandler} updateMobileNo={this.props.updateMobileNo} /></div>

          <div className={classes.sceESpace}><PhoneComp contactDetails={this.props.contactDetails.phoneSet[2]} contactId={this.props.contactDetails.contactId} errorHandler={this.props.errorHandler} updateMobileNo={this.props.updateMobileNo} /></div>

        </div>

      );



    }

    else if (this.props.contactDetails.countPhone === 0) {

      return (

        <div />

      );

    }

  }

And this function is called inside my render function as shown below:

  render() {

    app.logger.getLogger().info("props" + JSON.stringify(this.props));

    return (

      <div>

        {this.getPhoneComp()}

      </div>



    );

  }

Now, I am trying to write a test case for this function, but I am not able to figure out how to proceed.I wrote the below test case and it's not throwing any error, but the coverage is still the same.My test looks like this:

   let phoneComp = shallow(<PhoneContainer contactDetails={contactDetailsState} errorHandler={errorHandlerFn} updateMobileNo={updateMobileNoFn} />);

    phoneComp.instance().getPhoneComp();

Can someone please help me with this?

You need to add a spy and an expect statement:

  let node = shallow(<PhoneContainer ... />);



  const getPhoneCompSpy = jest.spyOn(node.instance(), 'phoneComp');



  expect(getPhoneCompSpy).toHaveBeenCalled();

You can find more details about spys here

In the way, Fabian have explained to you, you are only checking if the method is being called and nothing else. The logic inside it, like checking the countPhone and rendering the PhoneComp accordingly, aren't under tests.

IMHO, this is not a good approach at all. You are creating a very fragile test. If you do a minor refactor like rename the method, would break your tests.

In your tests, you have to check what's is actually being rendered at the end and nothing else.

One way to do that is using the find and checking the length for the result.

For example:

let phoneComp = shallow(<PhoneContainer contactDetails={contactDetailsState};

expect(phoneComp.find(PhoneComp)).toHaveLength(1); // or 2 or 3 regarding the case

In this way, you are actually testing the output of the function.