如何在 React Jest 中模擬 fetch

Question

我是反應測試的新手，我正在嘗試通過 mocking 獲取請求來測試我的異步 function。 但是，當我進行測試時，它給了我一個誤報。 我希望模擬獲取返回模擬數據，但它返回數據庫中的實際數據。 我做錯了什么。

這是我正在測試的實際 function。

export const fetchVisit = async (currentUserId, visitDate) => {
  try {
    const visitData = await axios.post(
      `${BASE_URL}/visit/${currentUserId}`,
      visitDate
    );
   
    const {
      data: {
        data: { visit },
      },
    } = visitData;

    
    return visit;
  } catch (err) {
    return err;
  }
};

這是我的測試套件中的 function

const mockData = [
  {
    serviceusersToVisit: [[Object], [Object]],
    _id: '1',
    currentUserId: '123',
    __v: 0,
    dateOfVisit: '2022-08-31T00:00:00.000Z',
  },
];

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve(mockData),
  })
);

describe('MOCK FETCH OF fetchVisit', () => {
  it('should fetch a single visit', async () => {
    let visitDate = {
      dateOfVisit: '2022-08-31T00:00:00.000+00:00',
    };

    let visit = await fetchVisit('123', visitDate);
    console.log(visit);
    expect(visit.length).toBe(1);
  });
}

Answer 1

您正在使用axios.post()發出 HTTP 請求，您應該模擬axios.post()方法而不是fetch 。

嘗試：

jest.spyOn(axios, 'post').mockResolvedValue({ data: mockData })