Jest测试中client.query已执行但未被检测到调用的原因

核心原因 #

你当前的useApolloClient mock写法存在关键问题：每次调用useApolloClient()都会返回一个全新的对象，这个对象里的query是新创建的jest.fn()实例。业务代码里拿到的client.query和测试代码里useApolloClient().query根本不是同一个函数，所以测试统计调用次数时自然显示0，哪怕实际已经执行过。

解决步骤 #

1. 提前定义共享的query mock函数
   把query的mock函数单独提出来，让所有useApolloClient返回的对象都复用同一个函数实例：

   // 先定义共享的query mock
   const mockQuery = jest.fn().mockResolvedValueOnce({
     data: { myReturnValue: { some: "data" } },
     loading: false,
     errors: undefined,
   })
   
   jest.mock("@apollo/client", () => ({
     ...jest.requireActual("@apollo/client"),
     useApolloClient: () => ({
       query: mockQuery, // 复用同一个mock函数
     }),
   }))
   

2. 修改测试断言
   直接用提前定义好的mockQuery做断言，不要再调用useApolloClient()取新的函数：

   fireEvent.click(screen.getByText("My Button Text"))
   await waitFor(() => expect(mockQuery).toBeCalledTimes(1))
   

这样就能正确统计到query函数的调用次数了，因为业务代码和测试代码用的是同一个mock函数实例。

内容的提问来源于stack exchange，提问作者Red Baron