Theo's Typesafe Cult•12mo ago

Setting up unit tests with Jest and React Testing Library

Hi everybody! Been looking to set up some unit tests for my app. I am having issues setting up the necessary providers around the component I am attempting to test. As shown below I am not sure why I am getting this error (shown in screenshot), Can't seem to google my way around this, any help or if you've managed to set this up in an open source project you are willing to share would be super appreciated!

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import ProductRateFees from "../../../src/pages/lenderSignUp/ProductRateFees";
import { SessionProvider } from "next-auth/react";
import { createTRPCReact } from "@trpc/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { type AppRouter } from "../../../src/server/trpc/router/_app";
import { trpcConfig } from "../../../src/utils/trpc";

jest.mock("@trpc/client", () => {
  return {
    httpBatchLink: jest.fn().mockImplementation(() => ({
      call: jest.fn(),
    })),
    loggerLink: jest.fn().mockImplementation(() => ({
      call: jest.fn(),
    })),
  };
});

describe("Describe Product Page", () => {
  it("It should render properly", async () => {
    const trpc = createTRPCReact<AppRouter>();
    const queryClient = new QueryClient();
    const trpcClient = trpc.createClient(trpcConfig);
    render(
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <SessionProvider
            session={{
              expires: "2100",
              user: {
                id: "test",
              },
            }}
          >
            <ProductRateFees />
          </SessionProvider>
        </QueryClientProvider>
      </trpc.Provider>
    );
    const header = screen.getByRole("heading");
    const headerText = "Sign Up (Admin)";
    expect(header).toHaveTextContent(headerText);
  });
});

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import ProductRateFees from "../../../src/pages/lenderSignUp/ProductRateFees";
import { SessionProvider } from "next-auth/react";
import { createTRPCReact } from "@trpc/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { type AppRouter } from "../../../src/server/trpc/router/_app";
import { trpcConfig } from "../../../src/utils/trpc";

jest.mock("@trpc/client", () => {
  return {
    httpBatchLink: jest.fn().mockImplementation(() => ({
      call: jest.fn(),
    })),
    loggerLink: jest.fn().mockImplementation(() => ({
      call: jest.fn(),
    })),
  };
});

describe("Describe Product Page", () => {
  it("It should render properly", async () => {
    const trpc = createTRPCReact<AppRouter>();
    const queryClient = new QueryClient();
    const trpcClient = trpc.createClient(trpcConfig);
    render(
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        <QueryClientProvider client={queryClient}>
          <SessionProvider
            session={{
              expires: "2100",
              user: {
                id: "test",
              },
            }}
          >
            <ProductRateFees />
          </SessionProvider>
        </QueryClientProvider>
      </trpc.Provider>
    );
    const header = screen.getByRole("heading");
    const headerText = "Sign Up (Admin)";
    expect(header).toHaveTextContent(headerText);
  });
});

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Setting up unit tests with Jest and React Testing Library