如何mock useApolloClient hook？使用MockedProvider仍报错怎么解决？

可能的原因 #

• 依赖版本冲突：项目中存在多个版本的Apollo Client相关依赖，MockedProvider和组件内调用的useApolloClient来自不同的包/版本，二者使用的Context实例不互通，无法正常读取实例。
• 版本过旧：低版本的MockedProvider本身存在对useApolloClient适配不完善的问题，无法正确导出Client实例给对应Hook读取。
• 存在不正确的全局Mock：测试代码中对@apollo/client做了全局Mock覆盖，导致useApolloClient的实现被篡改，无法正常读取Context中的Client实例。

对应的解决方法 #

1. 清理重复依赖：检查package.json中的依赖项，删除重复的apollo-client、@apollo/react-hooks等旧版相关依赖，统一使用同一版本的@apollo/client，删除node_modules和包锁文件（package-lock.json/yarn.lock）后重新安装依赖。
2. 升级依赖版本：将@apollo/client升级到最新稳定版，修复旧版本MockedProvider的适配问题。
3. 检查全局Mock逻辑：如果存在jest.mock('@apollo/client')之类的全局Mock代码，确保useApolloClient的导出没有被自定义逻辑覆盖，保留官方原生实现即可正常读取MockedProvider提供的实例。
4. 手动传入Mock Client实例（兜底方案）：可以手动初始化一个Mock的Apollo Client实例传入MockedProvider，跳过其自动生成逻辑，示例代码如下：

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { MockedProvider } from '@apollo/client/testing';

// 初始化mock client实例
const mockClient = new ApolloClient({
  cache: new InMemoryCache(),
  uri: '/mock-graphql'
});

const mockResponses = [];
const wrapper = mount(
    <MockedProvider mocks={mockResponses} addTypename={false} client={mockClient}>
      <Provider store={store}>
          <PriceComponent
            {...someProps}
          />
      </Provider>
    </MockedProvider>
);

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