Testing HOC wrapped React Component - reactjs

Question

I'm trying to test hoc wrapped component.
The component calls an apollo query inside.
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>
);
});
});
Even if I imported Pure Component without hoc, I get the same error when running the test.
However, if remove the hoc and export default Header (which is a pure component), it then passes the test... ;;;
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 />", () => {
it("renders ok", async () => {
const mockedClient = createMockClient();
render(
<ApolloProvider client={mockedClient}>
<Header />
</ApolloProvider>
);
});
});
Did I miss something? OR Is it just a bug?
I'm not quite sure how to deal with this problem...