Why do I get "ReferenceError: React is not defined"?

Question

Can someone figure out why I am getting this error?

 ✓ src/tests/unit.test.ts (1)
 ❯ src/tests/home.test.ts (1)
   × Home page

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/tests/home.test.ts > Home page
ReferenceError: React is not defined
 ❯ Home src/app/page.tsx:2:3
      1| export default function Home() {
      2|   return <div>Home of Next</div>;
       |   ^
      3| }
      4| 
 ❯ src/tests/home.test.ts:27:10

src/app/page.tsx

export default function Home() {
  return <div>Home of Next</div>;
}

home.test.tsx

import { render, screen } from "@testing-library/react";
import { vi, test } from "vitest";
import Home from "../app/page";

vi.mock("@frontegg/nextjs", () => {
  const mockedFunctions = {
    auth: () => new Promise((resolve) => resolve({ userId: "1" })),
    useUser: () => ({
      isSignedIn: true,
      user: {
        id: "1",
        fullName: "Fake Name",
      },
    }),
  };

  return mockedFunctions;
});

vi.mock("next/font/google", () => {
  return {
    Inter: () => ({ className: "inter" }),
  };
});

test("Home page", () => {
  render(Home());
  expect(screen.getByText("Home of Coach-Next")).toBeTruthy();
});

vitest.config.ts

import { defineConfig } from "vite";

export default defineConfig({
  test: {
    exclude: [
      "**/node_modules/**",
      "**/dist/**",
      "**/.{git,cache,output,temp}/**",
      "**/{vite,vitest}.config.*",
      ".*/**",
    ],
  },
});

vite.config.ts

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  test: {
    include: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
    globals: true,
    environment: "jsdom",
    setupFiles: "setupTests",
    mockReset: true,
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Answer 1

Thanks to @evolutionxbox comment the solution was setting

    "jsx": "react-jsx",

in tsconfig.json.