如何模拟一个箭头函数内的fetch调用？

Question

我试图测试一个函数的调用，该函数将删除React中保存在数据库中的特定数据。问题是，我想只模拟取值调用，而让其他所有的东西像往常一样运行，因为现在只要运行测试，数据库中的数据就会被删除。

这是我的删除函数的代码。

deleteEvent = async () => {
    try {
      await fetch(
        "api url",
        {
          method: "DELETE",
        }
      )
        .then((res) => res.json())
        .then(
          (result) => {
            console.log(result);
          },
          (error) => {
            console.log(error);
          }
        );
    } catch (error) {
      console.error(error);
    }
    this.props.history.push("/eventList");
  };

这是我的测试代码

test("deleteEvent function works", (done) => {
  const mockSuccessResponse = {};
  const mockJsonPromise = Promise.resolve(mockSuccessResponse);
  const mockFetchPromise = Promise.resolve({
    json: () => mockJsonPromise,
  });
  jest.spyOn(global, "fetch").mockImplementation(() => mockFetchPromise);

  const historyMock = { push: jest.fn() };
  const wrapper = shallow(<EventState history={historyMock} />);
  wrapper.instance().deleteEvent();
  expect(global.fetch).toHaveBeenCalledTimes(1);
  expect(historyMock.push.mock.calls[0]).toEqual(["/eventList"]);
  global.fetch.mockClear();
  done();
});

我得到了调用次数： 0 for the expect(global.fetch).toHaveBeenCalledTimes(1);和一个Received: undefined for the expect(historyMock.push.mock.calls[0]).toEqual(["eventList"])。

任何帮助将是巨大的

Answer 1

而不是使用 spyOn(global, fetch)试试这个

global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);

  const historyMock = { push: jest.fn() };
  const wrapper = shallow(<EventState history={historyMock} />);
  wrapper.instance().deleteEvent();
  expect(global.fetch).toHaveBeenCalledTimes(1);
  expect(historyMock.push.mock.calls[0]).toEqual(["/eventList"]);
  global.fetch.mockClear();
  done();
});