0

我有一个子组件MySummary，它调用从父组件传递的函数，如下所示：

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

在父组件中，该handleSubmit函数返回 apromise并在提交时重定向到另一个页面：

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

在浏览器中它似乎正在工作。即使我认为finally永远不会被调用，因为我们重定向到另一个页面，然后子组件将被卸载，但它似乎仍然到达了该代码块。finally当我运行该代码时，我已经从块登录到控制台。所以我不确定这是怎么发生的。我遇到的问题是我的测试失败并且我收到错误：

TypeError：无法读取未定义的“最终”属性

在我的测试中，我单击了一个调用提交函数的按钮，然后我只是检查是否调用了 handleSubmit 函数：

我正在安装这样的组件：

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

这是测试实现：

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

但是，该测试给出了上面提到的错误。我假设错误来自 prop 的错误实现handleSubmit，它仅定义为jest.fn(). 如何模拟 Promise 实现，以便让这个测试工作？

4

1 回答 1

2

您需要模拟函数返回 a Promise，就像实际函数一样。因此，尝试将模拟的返回值设置为已解决Promise：

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

有关更多信息，请参阅Jest 文档中的异步示例和模拟函数。

于 2020-02-27T23:47:29.583 回答