当我使用自定义反应钩子时，如何用多个不同的响应来模拟？答案

【问题标题】：How can I mock with jest multiple different responses when I'm using custom react hooks?当我使用自定义反应钩子时，如何用多个不同的响应来模拟？
【发布时间】：2022-02-16 09:26:59
【问题描述】：

我有一个钩子，在代码中被调用了 3 次：

const [{ loading: loadingHook1, data: dataHook1 }, fetchHook1] =
useFetchHook();
const [{ loading: loadingHook2, data: dataHook2 }, fetchHook2] = useFetchHook();
const [{ loading: loadingHook3, data: dataHook3 }, fetchHook3] =
useFetchHook();

所以我使用 promise all 来执行每个 fetch 例如：

Promise.all([fetchHookGender("/request/api", {
    method: "POST",
    body: JSON.stringify({
     ...body
    }),
  })...
])

在我的测试中，我模拟了钩子，但只是为了一个结果，所以在三个调用上打印相同的结果，我这样做：

jest.mock("../useFetchHook", () => ({
 useFetchHook: () => {...mockResponse}
}));

这样，我可以在单元测试中获得模拟数据，但每次调用代码时都会收到相同的结果/数据。

有没有一种方法可以返回同一个自定义挂钩的多个不同结果？

【问题讨论】：

标签： reactjs unit-testing jestjs react-hooks mocking

【解决方案1】：

你可以模拟如下：

const mockResponse: jest.Mock = jest.fn()

然后让你的模拟钩子这样做：

useFetchHook: () => {
   return mockResponse()
}

然后在每个测试中，您可以像这样更改模拟返回的内容：

mockResponse.mockImplementationOnce(() => false)

【讨论】：