如何模拟 useApolloClient 钩子？答案

【问题标题】：How to mock the useApolloClient hook?如何模拟 useApolloClient 钩子？
【发布时间】：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>
  );

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

【问题讨论】：

标签： reactjs apollo apollo-client react-apollo apollo-testing

【解决方案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
);

【讨论】：