測試提交給使用Jest提取的FormData

Question

我正在使用Jest測試在我的React應用程序中調用API。

我正在測試的代碼是：

const createItem = (data) => {
  let formData = buildForm(data);

  return fetch(URL, {
    method: 'POST',
    body: formData
  });
};

我想確認buildForm函數正確將data轉換為FormData對象。

我的測試看起來像這樣：

it('creates item using api', () => {
  let data = {name: 'test name'};
  return createItem(data)
    .then(() => {
      let expForm = new FormData();
      expForm.append('name', data.name);

      expect(global.fetch).toHaveBeenCalledWith(URL, {
        method: 'POST',
        body: expForm
      });
    });
});

問題是，無論我在測試中附加到expForm哪些字段，該測試都通過。 似乎toHaveBeenCalledWith實際上並沒有比較body的值，而只是檢查它是否是FormData對象。

如何測試傳遞到body FormData對象中的值？

Answer 1

您可以將FormData條目轉換為對象以便於比較。

expect(global.fetch).toHaveBeenCalledWith(
  URL,
  expect.objectContaining({ method: 'POST', body: expect.any(FormData) })
);

const formData = Array.from(global.fetch.calls[0][1].body.entries())
  .reduce((acc, f) => ({ ...acc, [f[0]]: f[1] }), {});
expect(formData).toMatchObject(data);