如何在 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 })