Marked as helpful by the asker
Vitest runs in Node by default, which has no DOM. Tell it to use jsdom for everything, remove the hand-made JSDOM:
npm i -D jsdom @testing-library/jest-dom @vitejs/plugin-react vite-tsconfig-paths// vitest.config.mts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [tsconfigPaths(), react()],
test: { environment: "jsdom", setupFiles: ["./vitest.setup.ts"] },
});// vitest.setup.ts
import "@testing-library/jest-dom/vitest";The setup file is what makes toBeInTheDocument exist. tsconfigPaths makes the @/ import work.
One heads-up: async server components can't be rendered like this. Test those with Playwright.
