2

我在 React 中有一个看起来像这样的过程：

handleButtonClick() {
  const payload = new FormData();
  payload.append('foo', someFileBlobContent);
  axios.post('/my-api/', payload);
}

当一个按钮被点击时，一些数据被编译为 FormData，然后在一个 POST 请求中作为负载发送到一个 API。

在我的 Jest/Puppeteer 测试中，我试图确认请求包含它应该包含的数据：

page.click('.my-button');

await page.waitForRequest(request => {
  if (request.url().match(/my-api/) && request.method() === 'POST') {
    expect(request.postData()).toBeDefined();
    return true;
  }
});

在这种情况下request.postData()是undefined。Puppeteer 中是否有某种方法可以检查有效负载是FormData结构的 POST 请求的内容？

在 Chrome 中运行该进程时，我可以通过 Chrome devtools 看到网络请求中显示的 FormData，所以我知道数据正在发送，但我想断言它。

4

1 回答 1

1

我做了一些测试，request.postData()只对我有用的application/x-www-form-urlencoded表格（又名“普通表格数据”）。一旦您上传文件，content-typeismultipart/form-data和 puppeteer 将无法返回帖子数据。

备选方案：检查 Content-Type 标头

由于您无法检查是否发送了发布数据，您仍然可以检查请求是否实际上是multipart/form-data请求。在这种情况下，content-type标题看起来像这样multipart/form-data; boundary=...，所以你可以像这样检查它：

await page.waitForRequest(request => {
  if (request.url().match(/my-api/) && request.method() === 'POST') {
    const headers = request.headers();
    expect(headers['content-type'].startsWith('multipart/form-data')).toBe(true);
    return true;
  }
});
于 2019-05-10T21:29:37.023 回答