如何使用笑话和酶为功能编写测试用例 [英] How to write test cases for a function using jest and enzyme

问题描述

我有一个react函数，它根据传递的props的值来渲染一个组件.该函数如下图所示:

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

有人可以帮我吗?

解决方案

您需要添加间谍和Expect语句:

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

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

  expect(getPhoneCompSpy).toHaveBeenCalled();

您可以在此处

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

这篇关于如何使用笑话和酶为功能编写测试用例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！