javascript - 模拟的多个 axios 端点在组件中返回未定义，但在测试中正确

Question

我的代码：

零件：

axios
  .get("/statuses/services")
  .then(({ data }) => {
    console.log({ data });
    setKobeStatuses(data);
  })
  .catch(console.log);

axios
  .get("/statuses/peripherals")
  .then(({ data }) => {
    console.log({ data });
    setPeripheralStatuses(data);
  })
  .catch(console.log);

测试：

jest.mock("axios", () => {
  return {
    create: jest.fn(() => ({
      get: jest.fn(),
      interceptors: {
        request: { use: jest.fn(), eject: jest.fn() },
        response: { use: jest.fn(), eject: jest.fn() },
      },
    })),
  };
});

const mockedAxios = axios as jest.Mocked<typeof axios>;

const generateRespObject = (service: string, status: string) => ({
  service,
  status,
});

const mockResponse = () => {
  console.log("mocking");
  mockedAxios.get.mockImplementation((url: string) => {
    switch (url) {
      case servicesUrl:
        return Promise.resolve([
          generateRespObject("service1", "up"),
          generateRespObject("service2", "down"),
        ]);
      case peripheralsUrl:
        return Promise.resolve([
          generateRespObject("perif1", "up"),
          generateRespObject("perif2", "down"),
        ]);
      default:
        return Promise.reject(new Error("404 url not found"));
    }
  });
};

test("testing", () => {
  mockResponse();
  console.log(axios.get(peripheralsUrl)); // logs 
    //Promise {
    //  [
    //    { service: 'perif1', status: 'up' },
    //    { service: 'perif2', status: 'down' }
    //  ]
    //}

  console.log(axios.get(servicesUrl)); // logs
    //Promise {
    //  [
    //    { service: 'service1', status: 'up' },
    //    { service: 'service2', status: 'down' }
    //  ]
    //}
});

但是这段代码失败了。它将数据记录为未定义

test("should match snapshot", async () => {
  mockResponse();
  const { asFragment } = renderComponent();
  await screen.findByText(/service1/i);
  await screen.findByText(/perif1/i);
  expect(asFragment()).toMatchSnapshot();
});

这是为什么？我错过了什么？我希望组件内部的请求返回模拟数据。

标签： javascripttypescriptaxiosjestjs