'test' does not exist in type 'UserConfigExport', even with reference types

Question

As described in this answer and in the docs. I've added the reference types for Vitest at the top of my Vite config file.

/// <reference types="vitest" />

Why am I still getting the TypeScript warning 'test' does not exist in type 'UserConfigExport'?

Answer 1

I have found a workaround for this problem - creating separate vitest.config.ts file. As docs states:

Create vitest.config.ts, which will have the higher priority and will override the configuration from vite.config.ts

Now you will have intellisense for test option.

Example vitest.config.ts file:

import { defineConfig } from 'vitest/config';

export default defineConfig({
    test: {
        globals: true,
        environment: 'jsdom',
        coverage: {
            provider: 'istanbul', // or 'c8',
            all: true,
        },
    },
});

Answer 2

I defined my own type and extended it to UserConfig.

...
import type { InlineConfig } from 'vitest';
import type { UserConfig } from 'vite';

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}
...

Then I casted the type of config object to my custom interface -

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: {
      web: [/\.[jt]sx?$/],
    },
    setupFiles: './setupVitest.ts',
  },
  build: {
    target: 'esnext',
  },
} as VitestConfigExport);

This also enabled intellisense for new test property. Also, you don't need to define /// <reference types="vitest" />.