I have been battling this issue for a while now, setting up Vitest in a react and typescript project, vitest does run from the cli but typescript reports an overload error in vite.config.ts

the exact error is
No overload matches this call.

Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'

The problem occurs when I add the test config to vite.config.ts like so

export default defineConfig({
  plugins: [react(), tailwindcss()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/tests/setup.ts",
    css: true,
  },
});

there is a red squiqqly line on test

If I try importing defineConfig from vitest/config instead, the error moves to the plugins array

here are my current configs

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/tests/setup.ts",
    css: true
  }
});

tsconfig.node.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "isolatedModules": true,
    "noEmit": true,
    "strict": true,
    "skipLibCheck": true,
    "types": ["vitest"]
  },
  "include": ["vite.config.ts"]
}

vite-env.d.ts

///

///

What works

Vitest does run from the CLI

output:

RUN v4.0.18

No test files found

So Vitest itself is installed and executable.

Versions

npm ls vite vitest typescript @vitejs/plugin-react

Output:

vite@5.4.21

@vitejs/plugin-react@4.7.0

vitest@4.0.18

typescript@5.9.3

vitest -> vite@7.3.1 (dependency)

project -> vite@5.4.21

Question

How should Vitest be correctly typed so that TypeScript accepts the test field in vite.config.ts without breaking plugin typings?

am I missing a required configuration?

Yes I have seen similar questions but they do not seem to address this issue