时间戳

首页 > 解决方案 > 如何使用 jest 和酶为函数编写测试用例

reactjs - 如何使用 jest 和酶为函数编写测试用例

问题描述

我有一个反应函数，它根据传递的道具的值呈现一个组件。该函数如下图所示：

 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() {
    app.logger.getLogger().info("props" + JSON.stringify(this.props));
    return (
      <div>
        {this.getPhoneComp()}
      </div>

    );
  }

现在，我正在尝试为这个函数编写一个测试用例，但我无法弄清楚如何继续。我编写了下面的测试用例，它没有抛出任何错误，但覆盖率仍然相同。我的测试看起来像这样：

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

有人可以帮我吗？

标签： reactjsjestjsenzyme

解决方案

您需要添加一个 spy 和一个 expect 语句：

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

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

  expect(getPhoneCompSpy).toHaveBeenCalled();

您可以在此处找到有关间谍的更多详细信息

推荐阅读