Vitest defineConfig, 'test' does not exist in type 'UserConfigExport'

I separated the files because i got the from this question and if i changed the import to vitest i got another error in the plugin react line.

• vite.config.ts
• vitest.config.ts

vitest:

import { defineConfig } from 'vitest/config';

    export default defineConfig({
        test: {
          globals: true,
          environment: 'jsdom'
        },
      })

vite:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
})

We can use mergeConfig method from vite or vitest/config entries to merge Vite config with Vitest config:

import { defineConfig as defineViteConfig, mergeConfig } from 'vite';
import { defineConfig as defineVitestConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

const viteConfig = defineViteConfig({
  plugins: [react()],
});

const vitestConfig = defineVitestConfig({
  test: {
    // ...
  },
});

export default mergeConfig(viteConfig, vitestConfig);

Here is what I did in case someone is still looking for a solution. I created my own type and extended 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 declare /// <reference types="vitest" />. It might help.

I was in a similar situation, asking me the same thing and end up doing this:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';

const vitestConfig: VitestUserConfigInterface = {
  test: {
    // vitest config, with helpful vitest typing :)
  }
};

export default defineConfig({
  test: vitestConfig.test,
  // and now: just vite config
});

It may be helpful.

sunny prakash solution is quite good, but it allow wrong type in config due to as VitestConfigExport construction.

Better way is to move config to separate constant and use it

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

type ViteConfig = UserConfig & { test: InlineConfig };
const config: ViteConfig = {
  // other config
  test: {
    environment: 'jsdom',
  },
};
export default defineConfig(config);

I had a similar issue that was resolved by using a version of vitest and vite that were compatible. In my case the latest version of each. I assume using versions that were released around the same time frame would work as well.

yarn install -D vitest vite

as 2024 you can just import vitest/config which pulls the extended types automatically

import {defineConfig} from "vite";
import "vitest/config" // <-- just dummy import

export default defineConfig({
  test: {
    // your stuff here
  }
})

Replacing the function with an arrow function worked for me. Mentioned at https://github.com/vitest-dev/vitest/discussions/1106#discussioncomment-2531279

export default defineConfig(() => ({
  build: {
    // ...
  },
  test: {
    // ...
  },
}));

None of the options listed above helped me. Eventually, I've managed to solve this issue using the type augmentation feature:

import type { UserConfig as VitestUserConfig } from 'vitest/config';
import { defineConfig } from 'vite';

declare module 'vite' {
  export interface UserConfig {
    test: VitestUserConfig['test'];
  }
}

export default defineConfig({
  // add your vite configuration here

  test: {
    // add your vitest configuration here
  },
});

TLDR

Assert your config object's type as UserConfig (see last line):

import { defineConfig, UserConfig } from 'vite'

export default defineConfig({
    // your vite config
    test: {
        environment: 'jsdom',
        setupFiles: 'src/setup-tests.tsx',
        coverage: {...},
    },
} as UserConfig)

Explaination

The other answers here either did not work, or were to complex for me to want to even try.

Eventually, after extending UserConfig in a few variations of this:

declare module 'vite' { interface UserConfig... }

I realized that the error wasn't complaining about UserConfig, but UserConfigExport:

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

So that's why it wasn't taking - defineConfig is overloaded with 4 signatures, and typescript for some reason was matching my invocation to the fourth option shown here, rather than the first.

declare function defineConfig(config: UserConfig): UserConfig;
declare function defineConfig(config: Promise<UserConfig>): Promise<UserConfig>;
declare function defineConfig(config: UserConfigFnObject): UserConfigFnObject;
declare function defineConfig(config: UserConfigExport): UserConfigExport;

That is, it didn't matter how I extended UserConfig through a global module definition, or how or where I included the triple-slash reference directive suggested in the docs (which as far as I understand it basically does the same thing), because my config object wasn't being typed as a UserConfig at all!

Once I realized that, I tried the type assertion and all was well. No custom module declarations, not triple-slash reference at the top of the file - just the type assertion.

Short Answer:

If you're encountering type errors when using vite and vitest in your vite.config.ts file, it's likely due to incompatible types between the defineConfig functions from vite and vitest/config.

Here's how I resolved the issue:

import { defineConfig as testConfig } from "vitest/config";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// Vite configuration
const config = defineConfig({
  plugins: [vue()],
});

// Vitest configuration
const tstConfig = testConfig({
  test: {
    environment: "jsdom",
  },
});

// Merge configurations
export default {
  ...config,
  ...tstConfig,
};

• Separate Configurations: By defining config and tstConfig separately and then merging them, you avoid type conflicts between vite and vitest.

This approach should resolve the type errors and allow you to use both vite and vitest configurations.

The above method doesn't work for me, then I try this, It work.

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx'; // 支持jsx语法

// https://vitejs.dev/config/
export default defineConfig(() => {
  return {
    plugins: [vue(), vueJsx()],
    test: {
      globals: true,
      environment: 'jsdom',
      transformMode: { web: [/.[tj]sx$/] },
    },
  };
});

You have to update your tsconfig.json file so that it:

1. includes the vite.config.ts file
2. included types from vite even if not imported in any file

tsconfig.json

{
   "compilerOptions": {
      "types": [
         "vitest"
     ],  
  },
  "include": [
    "src",
    "vite.config.ts"
  ]
}

vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  ...
  test: {
     ...
  },
});

My solution

vite.config.ts

import { defineConfig } from "vitest/config"
import tsConfigPaths from "vitest-tsconfig-paths"

export default defineConfig({
  plugins: [tsConfigPaths()],
  test: {
    globals: true,
  },
})

update your file tsconfig.json inserting following lines below.

tsconfig.json

{
  "baseUrl": "./",
  "paths": {
    "@/*": ["./src/*"]
  },
  "types": ["vitest/globals"]
}

It might be because you have multiple versions of vite installed. Search in your package-lock or yarn-lock file to find the entries for vite, and make sure there's only one of them. After that, I got it to work using the triple-slash.

This works for me and it's clean imo.

import { defineConfig } from 'vite';
import type { UserConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

const config: UserConfig = {
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
};

// https://vitejs.dev/config/
export default defineConfig(config);

Here's a more minimal approach than existing answers (using typescript 5.7.2, vite 6.0.3, and vitest 2.1.8/3.0.0-beta.2):

import type { UserConfig } from 'vite'
import type { UserConfig as VitestConfig } from 'vitest/node'

export default {
    // ...vite config...
    test: {
        // ...vitest config...
    }
} as UserConfig & { test: VitestConfig }

(Note: vite's UserConfig is documented, but vitest's UserConfig doesn't seem to be documented -- so possibly this may not continue to work in later releases of vitest)

As someone mentioned, what worked for me was to install compatible versions of vite and vitest. When I typed the npm ls vite command, I realized there were different versions of vite, so I installed the specific version that vitest installed and I no longer get the error. If this is not a good solution, please let me know.

I had a similar issue with my project, but after adding /// <reference types="vitest" /> this line at the top of the file, the error is gone.

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
  ...
  test: {
   ...
  },
});