Short answer:
Because this is how TypeScript works. Vite config interface does not know anything about Vitest and TS does not allow excessive properties (properties not defined by the type/interface)
Because Vite itself does not know anything about Vitest and it’s configuration. So Vitest must extend Vite config (defined as TS interface)
In order to use this extended interface (instead of the original one), you must first import it.
So instead of doing this (importing pure Vite config):
import { defineConfig } from 'vite';
do this (importing Vite config extended by Vitest):
import { defineConfig } from 'vitest/config';
Alternatively you can also use a “tripple slash command” as documented in Configuring Vitest
/// <reference types="vitest" />
import { defineConfig } from 'vite'
export default defineConfig({
test: {
// ...
},
})