module.exports = {
  rootDir: "./src",
  preset: "ts-jest",
  testEnvironment: "jsdom",
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  setupFilesAfterEnv: ["<rootDir>/config/tests/setupTests.ts"],
  extensionsToTreatAsEsm: [".ts", ".tsx"],
  moduleDirectories: ["node_modules", "./src"],
  moduleNameMapper: {
    "\\.(css)$": "identity-obj-proxy",
my main.tsx file
import React from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "react-query";
// tailwind styles
import "styles/index.css";
import App from "./App";
type RootElement = Element | DocumentFragment;
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
});
const rootElement = document.getElementById("root");
const renderRoot = createRoot(rootElement as RootElement);
renderRoot.render(
  <React.Fragment>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.Fragment>,
unit testing file
import { render, screen, waitFor } from "@testing-library/react";
import { Home } from "../index.page";
describe("Home Screen", () => {
  it("Render Home screen", () => {
    const { container } = render(<Home />);
    expect(container).toMatchSnapshot();
  });
  it("check if Home screen renders", async () => {
    render(<Home />);
    await waitFor(() => screen.getByText("With Generic Type"));
    expect(screen.getByText("With Generic Type").innerHTML).toBe(
      "With Generic Type",
  });
});
Is there any suggestion or something? I will appreciate, Thanks before -/-