如何模拟 useApolloClient 钩子？

Posted 2023-02-21

【中文标题】如何模拟 useApolloClient 钩子？

【英文标题】：How to mock the useApolloClient hook?

【发布时间】：2021-11-24 11:59:39

【问题描述】：

Apollo Client 提供了this doc 用于测试带有MockedProvider 的API，但它似乎没有模拟useApolloClient 钩子。当我将 MockedProvider 与我的功能组件一起使用并运行测试时，即使我在安装时添加了 MockedProvider，我也会收到此错误：

Invariant Violation: No Apollo Client instance can be found. Please ensure that you have called `ApolloProvider` higher up in your tree.

      72 |   );
      73 |
    > 74 |   const makeCall = useApolloClient();

这就是我安装它的方式：

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

有什么想法可能会出错吗？

【参考方案1】：

我建议您为此创建一个包装器，以便在需要时重复使用它。

import  MockedProvider, MockedResponse  from "@apollo/client/testing";
import  render, RenderResult  from "@testing-library/react";
import  FC, ReactElement  from "react";

function renderWithApolloProvider(
  ui: ReactElement,
  mocks: MockedResponse<Record<string, any>>[] = [],
): RenderResult 
  const Wrapper: FC = ( children ) => 
      return (
          <MockedProvider mocks=mocks>
              children
          </MockedProvider>
      );
  ;

  return render(ui,  wrapper: Wrapper );
;

然后你可以像这样在你的测试中使用它：

const mocks = [
  // Your GraphQL mocks
];

renderWithApolloProvider(
  <PriceComponent
     ...someProps
  />,
  mocks
);

我在上面的例子中使用了 react 测试库。

您似乎正在使用enzyme 来测试您的组件，所以试试这个

function mountWithApolloProvider(
    Component,
    mocks = [],
) 
  const wrapper = mount(
     <Provider store=store>
       <MockedProvider mocks=mocks addTypename=false>
          <Component />
       </MockedProvider>
     </Provider>
  )
  return wrapper;

用法：

const mocks = [
  // Your GraphQL mocks
];

renderWithApolloProvider(
  PriceComponent,
  mocks
);