Question

我有一个看起来像这样的函数：

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

然后在我的渲染函数中，按如下所示调用函数：

render() {
    return (
      <div>
        {this.getPhoneComp()}
      </div>

    );
  }

因此，当前我正在为此组件编写一个测试用例，如下所示：

 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();
    });

因此，我正在尝试运行该功能，但是在运行此测试时，出现以下错误：

Expected mock function to have been called.

在测试中的expect(getPhoneCompFn).toHaveBeenCalled();行。那么，如何测试该函数是否被调用？

Answer 1

getPhoneComp不是道具，而是方法。由于它是原型方法，因此可以在类原型上进行模拟：

getPhoneCompFn=jest.spyOn(PhoneContainer.prototype, 'getPhoneComp')
.mockImplementation(() => {});

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

使用笑话和酶测试功能

1 个答案: