测试FormData提交给使用jest获取

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);