Как написать контрольные примеры для функции, используя шутку и фермент

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

Фабиан объяснил вам, что вы проверяете, вызывается ли метод, и ничего больше.Логика внутри него, например, проверка countPhone и рендеринг PhoneComp соответственно, не тестируются.

ИМХО, это не совсем хороший подход.Вы создаете очень хрупкий тест.Если вы сделаете незначительный рефакторинг, такой как переименование метода, это нарушит ваши тесты.

В ваших тестах вы должны проверить, что на самом деле отображается в конце, и ничего больше.

В одну сторонуДля этого используется find и проверка длины результата.

Например:

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

Таким образом, вы фактически проверяете выходные данные функции.

Answer 2

Вам нужно добавить шпиона и оператор ожидания:

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

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

  expect(getPhoneCompSpy).toHaveBeenCalled();

Более подробную информацию о шпионах можно найти здесь