使用react-ts模板对vite.config.js中的Vitest设置进行故障排除

Question

在 vite.config.ts 中添加 'jsdom' 会出现以下错误：

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.

这是 vite.confg.ts 代码，其中突出显示了错误：

import react from '@vitejs/plugin-react'

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

尝试添加 TS 和 ChatGPT 类型来解决错误。

Answer 1

您需要将这两个三斜杠引用添加到 vite.config.ts 文件的顶部：

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

这记录在 Vitest 示例配置文件中。

Answer 2

我遇到了类似的错误：

No overload matches this call.
   The last overload gave the following error.
     Type 'PluginOption[]' is not assignable to type 'PluginOption'.
       Type 'import("<code>/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption[]' is not assignable to type 'import("<code>/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption[]'.
         Type 'import("<code>/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("<code>/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption'.
           Type 'Plugin<any>' is not assignable to type 'PluginOption'.

就我而言，我的

node_modules

中仍然安装了较旧的 vite 瞬态版本作为瞬态依赖项。删除

node_modules

并重新安装对我有用。这可能无法解决最初的问题，但可能会帮助像我一样偶然发现此页面的人。有关更多详细信息，请参阅此处：https://github.com/vitest-dev/vitest/issues/4048

我的 vitest.config.ts：

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    exclude: ["node_modules"],
    setupFiles: ["./vitest.setup.ts"],
  }
});