Troubleshooting Vitest setup in vite.config.js with react-ts template

Question

Adding 'jsdom' to vite.config.ts brings the following error:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ plugins: PluginOption[][]; test: { environment: string; }; }' is not assignable to parameter of type 'UserConfigExport'.
      Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'.ts(2769)
index.d.ts(579, 25): The last overload is declared here.

Here is the vite.confg.ts code with the highlighted error:

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],  
  test: {
    environment: 'jsdom',
  },
})

Attemped type adding with TS and ChatGPT to resolve error.

Caseation

Answer 1

You will need to add both of these triple-slash references to the top of your vite.config.ts file:

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

This is documented in the Vitest example configuring file.

Engaged

I still get it, even with that exact config file – Exum

This is not working for me, I opened an issue on GitHub because I'm not sure how to fix it: github.com/vitest-dev/vitest/issues/5256 – Aparri