Vitest defineConfig, 'test' 不存在于'UserConfigExport' 类型中答案

【问题标题】：Vitest defineConfig, 'test' does not exist in type 'UserConfigExport'Vitest defineConfig, 'test' 不存在于'UserConfigExport' 类型中
【发布时间】：2022-07-25 16:19:14
【问题描述】：

尝试在已经存在的 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 代码中它会抱怨：

悬停时我看到：

'{ test: { globals: boolean; 类型的参数环境：字符串； };插件：插件[]； }' 不可分配给“UserConfigExport”类型的参数。对象字面量只能指定已知属性，而 'userConfigExport' 类型中不存在 'test'.ts(2345)

如果我改变这一行，我可以让它消失：

import { defineConfig } from 'vite';

收件人：

import { defineConfig } from 'vitest/config';

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

【问题讨论】：

标签： typescript vite vitest

【解决方案1】：

简答：

因为这就是 TypeScript 的工作方式。 Vite config interface 对 Vitest 一无所知，TS 不允许过多的属性（未由类型/接口定义的属性）

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

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

或者，您也可以使用 Configuring Vitest 中记录的“三斜杠命令”

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

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

【讨论】：

【解决方案2】：

我也遇到过类似的情况，问了我同样的问题，最后还是这样做了：

/// <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
});

这可能会有所帮助。

【讨论】：