jeudi 28 janvier 2021

Testing HOC wrapped React Component

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...

Aucun commentaire:

Enregistrer un commentaire