使用 jest 和酶测试功能

Question

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?

Answer 1

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 ... />);