Обещание Jest-тестирования в React дает TypeError: Невозможно прочитать свойство 'finally' из неопределенного - PullRequest
0 голосов
/ 27 февраля 2020

У меня есть дочерний компонент MySummary, который вызывает функцию, переданную из родительского компонента, следующим образом:

submit() {
    this.setState({submitting: true});
    this.props.handleSubmit()
      .finally(() => {
        if (!this.mounted) {
          return;
        }
        this.setState({submitting: false, showConfirmDialog: false});
      });
  }

А в родительском компоненте функция handleSubmit возвращает promise и перенаправляет на отправить на другую страницу:

handleSubmit() {
    return this.gateway.submitExam()
      .then((exam) => {
        this.setState(exam);
        this.props.history.push('/exam/result');
      });
  }

В браузере, похоже, работает. И хотя я думал, что finally никогда не будет вызван, потому что мы перенаправляем на другую страницу, и тогда дочерний компонент отключается, кажется, что он все еще достигает этого блока кода. Я вошел в консоль из блока finally, когда выполнял этот код. Поэтому я не уверен, как это происходит. Проблема в том, что мой тест не пройден, и я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'finally' из неопределенного

В моем тесте я нажав на кнопку, которая вызывает функцию отправки, а затем я просто проверяю, была ли вызвана функция handleSubmit:

Я монтирую компонент следующим образом:

< MySummary exam={exam} handleSubmit ={jest.fn()}/>

И это реализация теста:

const submitButton = confirmDialog.findByProps({'data-testid': 'submit-exam'});
submitButton.props.onClick();
expect(mySummary.props.handleSubmit).toHaveBeenCalled();

Но этот тест выдает ошибку, упомянутую выше. Я предполагаю, что ошибка происходит из-за неправильной реализации реквизита handleSubmit, который определяется только как jest.fn(). Как я могу издеваться над реализацией обещания, чтобы этот тест заработал?

1 Ответ

1 голос
/ 28 февраля 2020

Вам нужна ваша смоделированная функция, чтобы вернуть Promise, как это делает настоящая функция. Итак, попробуйте установить возвращаемое значение макета равным Promise:

handleSubmit={jest.fn(() => Promise.resolve())}

См. Asyn c Пример и Функции макета из документов Jest для получения дополнительной информации.

...