Question

我有一个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();

有人可以帮我吗？

Answer 1

您需要添加一个间谍和Expect语句：

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

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

  expect(getPhoneCompSpy).toHaveBeenCalled();

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

Answer 2

顺便说一句，Fabian向您解释了，您只是在检查是否正在调用该方法，而仅检查其他方法。里面的逻辑，例如检查countPhone和相应地渲染PhoneComp，都没有经过测试。

恕我直言，这根本不是一个好方法。您正在创建一个非常脆弱的测试。如果您进行较小的重构（如重命名方法），则会破坏测试。

在测试中，您必须检查最后实际渲染了什么，而没有其他东西。

一种方法是使用find并检查结果的长度。

例如：

let phoneComp = shallow(<PhoneContainer contactDetails={contactDetailsState};
expect(phoneComp.find(PhoneComp)).toHaveLength(1); // or 2 or 3 regarding the case

通过这种方式，您实际上是在测试函数的输出。

如何使用笑话和酶为功能编写测试用例

2 个答案: