Website-Suche

typescript - Fehlerbehebung bei der Vitest-Einrichtung in vite.config.js mit react-ts Vorlage

Das Hinzufügen von 'jsdom' zu vite.config.ts bringt den folgenden Fehler:

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.

Hier ist der vite.confg.ts-Code mit dem hervorgehobenen Fehler:

import react from '@vitejs/plugin-react'

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

Versuchter Typzusatz mit TS und ChatGPT zur Behebung des Fehlers.

Antwort #1

Sie müssen beide dieser Triple-Slash-Verweise oben in Ihrer vite.config.ts-Datei hinzufügen:

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

Dies ist in der Vitest-Beispieldatei zur Konfiguration dokumentiert.

Antwort #2

Kurze Antwort:

Wenn Sie Typfehler beim Verwenden von vite und vitest in Ihrer vite.config.ts-Datei feststellen, liegt dies wahrscheinlich an inkompatiblen Typen zwischen den defineConfig-Funktionen von vite und vitest/config.

So habe ich das Problem gelöst:

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

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

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

// Merge configurations
export default {
  ...config,
  ...tstConfig,
};
  • Separate Konfigurationen: Indem Sie config und tstConfig separat definieren und dann zusammenführen, vermeiden Sie Typkonflikte zwischen vite und vitest.

Dieser Ansatz sollte die Typfehler beheben und es Ihnen ermöglichen, sowohl vite- als auch vitest-Konfigurationen zu verwenden.

Verwandte Artikel