Javascript React/Jest/Enzyme-如何使用外部API测试表单提交？

我正在使用地理编码API验证表单上的地址提交。在表单提交时，我调用地理编码API，然后在完成后验证表单的其余部分

class Form extends React.Component {
geocode = (streetAddress, city, postcode) => {
  return Geocode.fromAddress(`${streetAddress} ${city} ${postcode}`);
};

validateAddress = callback => {
  const { streetAddress, city, postcode } = this.state;
  return geocode(streetAddress, city, postcode)
    .then(response => {
      const { lat, lng } = response.results[0].geometry.location;
      this.setState({ lat: lat, lng: lng });
      console.log(1);
    })
    .catch(error => {
      this.setState({ postcodeError: true });
    });
};

validateForm = (error = false) => {
  {
    ...form validation
  }
  if (error === false) {
    this.setState({ showPreview: true });
  }
};

handleSubmit = event => {
  this.validateAddress().then(() => {
    this.validateForm();
  });
};

render() {
  return(...form onSubmit={e => this.handleSubmit(e)}
)
}


}

这在Chrome中运行良好，但当我来开玩笑地测试交互时，地理代码承诺根本没有执行

    const wrapper = mount(<Form />);
    wrapper.setState(validInputs);
    wrapper
      .find(".submit")
      .first()
      .simulate("submit");
    expect(wrapper.state("showPreview")).toBe(true);
  });

const wrapper=mount（）；
包装器设置状态（有效输入）；
包装纸
.find（“.submit”）
.first（）
.模拟（“提交”）；
expect（wrapper.state（“showPreview”）.toBe（true）；
});

根据我的理解，这是因为Jest

测试在到达执行结束时即完成

（docs），这意味着它不会等待异步代码完成运行

我知道我可以单独提取异步方法并开玩笑地测试它们，但是如何测试其他方法调用的承诺呢？例如，我希望确保当用户点击submit时，我的组件以正确的顺序运行

validateAddress

和

validateForm

，并正确处理任何错误

---

注意：我也模拟了地理编码调用，但为了简洁起见，我省略了它

使用

jest.mock

或

Proxy

。另外，将代码（

geocode

和

validateAddress

）拆分为不同的文件也是值得的，而且应该更容易、更简单，而且我认为是合适的：）