Argthtjtr

I have a function which looks like this:

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 />

      );

    }

  }

Then in my render function, I am calling the function as shown below:

render() {

    return (

      <div>

        {this.getPhoneComp()}

      </div>



    );

  }

So, currently I am writing a test case for this component as shown below:

 it('renders the Phone component', () => {

      let contactDetailsState={contactDetails:{

        webId:'', 

        contactId:'', 

        isContactPresent:true,

        firstName:'',

        lastName:'',

        middleName:'',

        customerSet:[{customerNumber:'1379',

        customerName:'K F I INCORPORATED',

        serviceAccountCount:2,

        customerContactRelationshipType:'Z00001',

        notificationEmailIndex:'E1',

        customerStatus:'',

        notificationVoiceIndex:'P2',

        customerType:'S',

        notificationPhoneIndex:'P1',

        contactId:'0104489742',

        notificationEmail:'xx1212@a.com',

        notificationVoice:'4564564564',

        notificationSms:'5656565566'}],

        emailSet:[{notificationEmail:'xx1212@a.com',

        notificationEmailIndex:'E1'},

        {notificationEmail:'xx1@a.com',notificationEmailIndex:'E2'}],

        emailSetWithNoAlert:[{notificationEmail:'xx1212@a.com',notificationEmailIndex:'E1'},

        {notificationEmail:'xx1@a.com',notificationEmailIndex:'E2'},

        {notificationEmail:'No email alerts',notificationEmailIndex:'NaN'}],

        phoneSet:[{notificationPhone:'5656565566',notificationPhoneIndex:'P1',

        notificationPhoneType:'M'},{notificationPhone:'4564564564',

        notificationPhoneIndex:'P2',notificationPhoneType:'L'}],phoneSetWithNoAlert

        :[{notificationPhone:'5656565566',notificationPhoneIndex:'P1',

        notificationPhoneType:'M'},{notificationPhone:'4564564564',

        notificationPhoneIndex:'P2',notificationPhoneType:'L'},

        {notificationPhone:'No Phone Alerts',notificationPhoneIndex:'NaN',

        notificationPhoneType:'L'},{notificationPhone:'No Text Alerts',

        notificationPhoneIndex:'NaN',notificationPhoneType:'M'}],

        mobileSet:[{notificationPhone:'5656565566',notificationPhoneIndex:'P1',notificationPhoneType:'M',contactId:'0104489742'}],

        isMobilePresent:true,countEmail:2,countPhone:2,countMobile:1,totalphoneCount:2,

        enrollCustomer:['1379'],suffix:'Jr.',prefix:'Mr.'}};





      let errorHandlerFn=jest.fn();

      let updateMobileNoFn=jest.fn();

      let getPhoneCompFn=jest.fn();

      let phoneComponent = mount(<PhoneContainer contactDetails={contactDetailsState} errorHandler={errorHandlerFn} updateMobileNo={updateMobileNoFn} getPhoneComp={getPhoneCompFn} />);

      expect(getPhoneCompFn).toHaveBeenCalled();

    });

So, I am trying to run the function, but while running this test, I get the below error:

Expected mock function to have been called.

in
expect(getPhoneCompFn).toHaveBeenCalled(); line in the test. So, how do I test if the function is called?

getPhoneComp is not a prop but a method. Since it's prototype method, it can be mocked on class prototype:

getPhoneCompFn=jest.spyOn(PhoneContainer.prototype, 'getPhoneComp')

.mockImplementation(() => {});



let phoneComponent = mount(<PhoneContainer ... />);