Vitest defineConfig，'test'类型不存在'UserConfigExport'

Question

正在尝试在已经存在的 vite（vue 3，typescript）项目上设置 vitest。

我的 vite.config.ts 看起来像这样：

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

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
  plugins: [vue()],
});

但在 VS 代码中它抱怨：

悬停时我看到：

Argument of type '{ test: { globals: boolean; environment: string; }; plugins: Plugin[]; }' is not assignable to parameter of type 'UserConfigExport'. Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'.ts(2345)

如果我更改此行，我可以让它消失：

import { defineConfig } from 'vite';

收件人：

import { defineConfig } from 'vitest/config';

但是为什么呢？这是怎么回事？为什么我必须从 vitest 导入 defineConfig 才能让它支持测试属性?

Answer 1

简答：

因为这就是 TypeScript 的工作方式。 Vite config 接口不了解 Vitest 并且 TS 不允许过多的属性（properties not defined by the type/interface）

因为Vite本身对Vitest及其配置一无所知。所以Vitest必须extend Vite config(定义为TS接口)

为了使用这个扩展接口（而不是原来的接口），你必须先导入它。

或者，您也可以使用 Configuring Vitest

中记录的“三重斜杠命令”

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

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

Vitest defineConfig，'test'类型不存在'UserConfigExport'

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

typescript

vite

vitest