测试 HOC 包装的 React 组件

如何解决测试 HOC 包装的 React 组件

我正在尝试测试 hoc 包装的组件。

组件在内部调用 apollo 查询。

const Header: React.FC<IProps> = ({}) => {
  const { data,loading } = useMeQuery();
  return (
    <>
      {!data?.me.verified && (
        <div className="bg-red-500 p-3 text-center text-sm text-white font-bold">
          <span>Please verify your email</span>
        </div>
      )}
      <header className="py-4">
        <div className="w-full px-5 xl:px-0 max-w-screen-xl bg-yellow-500 mx-auto">
          <Image
            src="/pineapple.png"
            alt="pineapple-logo"
            width="64"
            height="64"
          />
          {data ? (
            <NextLink href="edit-profile">
              <Link>
                <span className="text-sm">
                  <FontAwesomeIcon className="text-xl" icon={faUser} />
                  {data?.me.email}
                </span>
              </Link>
            </NextLink>
          ) : (
            <div>Login</div>
          )}
        </div>
      </header>
    </>
  );
};

export { Header as PureHeader };
export default withApollo()(Header);

import { render,waitFor } from "@testing-library/react";
import React from "react";
import Header,{ PureHeader } from "../../src/components/Header";
import { ApolloProvider } from "@apollo/client";
import { createMockClient } from "mock-apollo-client";
import { MockedProvider } from "@apollo/client/testing";
import withApolloMocked from "../../src/apollo/__mock__/withApolloMocked";

describe("<Header />",() => {
  it("renders ok",async () => {
    const mockedClient = createMockClient();
    render(
      <ApolloProvider client={mockedClient}>
        <PureHeader />
      </ApolloProvider>
    );
  });
});

即使我在没有 hoc 的情况下导入 Pure Component，我在运行测试时也会遇到同样的错误。

但是，如果删除 hoc 并导出默认 Header（这是一个纯组件），则它通过测试...;;;

import React from "react";
import Image from "next/image";
import { useMeQuery } from "../generated/graphql";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import NextLink from "next/link";
import { Link } from "@chakra-ui/react";
import withApollo from "../apollo/withApollo";

interface IProps {}

const Header: React.FC<IProps> = ({}) => {
  const { data,loading } = useMeQuery();
  return (
    <>
      {!data?.me.verified && (
        <div className="bg-red-500 p-3 text-center text-sm text-white font-bold">
          <span>Please verify your email</span>
        </div>
      )}
      <header className="py-4">
        <div className="w-full px-5 xl:px-0 max-w-screen-xl bg-yellow-500 mx-auto">
          <Image
            src="/pineapple.png"
            alt="pineapple-logo"
            width="64"
            height="64"
          />
          {data ? (
            <NextLink href="edit-profile">
              <Link>
                <span className="text-sm">
                  <FontAwesomeIcon className="text-xl" icon={faUser} />
                  {data?.me.email}
                </span>
              </Link>
            </NextLink>
          ) : (
            <div>Login</div>
          )}
        </div>
      </header>
    </>
  );
};

// export { Header as PureHeader };
// export default withApollo()(Header);
export default Header;

import { render,waitFor } from "@testing-library/react";
import React from "react";
// import Header,{ PureHeader } from "../../src/components/Header";
import Header from "../../src/components/Header";
import { ApolloProvider } from "@apollo/client";
import { createMockClient } from "mock-apollo-client";
import { MockedProvider } from "@apollo/client/testing";
import withApolloMocked from "../../src/apollo/__mock__/withApolloMocked";

describe("<Header />",async () => {
    const mockedClient = createMockClient();
    render(
      <ApolloProvider client={mockedClient}>
        <Header />
      </ApolloProvider>
    );
  });
});

我错过了什么吗？或者这只是一个错误吗？

我不太确定如何处理这个问题...