首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vitest defineConfig,“UserConfigExport”类型中不存在“测试”

Vitest defineConfig,“UserConfigExport”类型中不存在“测试”
EN

Stack Overflow用户
提问于 2022-05-06 19:12:17
回答 3查看 5.3K关注 0票数 13

尝试在已经存在的vite (vue 3,typescript)项目上设置最有活力的项目。

我的vite.config.ts看起来是这样的:

代码语言:javascript
运行
复制
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

但在VS代码中,它抱怨道:

在悬停时我看到:

类型'{ test:{ globals: boolean;环境: string;};plugins: Plugin[];}‘的参数不能分配给类型'UserConfigExport’的参数。对象文字只能指定已知的属性,并且在类型‘UserConfigExport.ts(2345)中不存在'test’。

如果我改变这句话,我就能让它消失:

代码语言:javascript
运行
复制
import { defineConfig } from 'vite';

至:

代码语言:javascript
运行
复制
import { defineConfig } from 'vitest/config';

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-05-07 04:01:50

简短回答:

因为这就是TypeScript的工作方式。Vite配置接口不了解Vitest,TS不允许过多的属性(属性没有由类型/接口定义)

因为Vite本身对Vitest和它的配置一无所知。所以Vitest必须扩展 Vite配置(定义为TS接口)

为了使用这个扩展的接口(而不是原来的接口),您必须首先导入它。

或者,您也可以使用配置Vitest中记录的“三重斜杠命令”。

代码语言:javascript
运行
复制
/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})
票数 20
EN

Stack Overflow用户

发布于 2022-07-25 08:19:14

我也遇到了类似的情况,问我同样的问题,最后我做了这样的事情:

代码语言:javascript
运行
复制
/// <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
});

这可能会有帮助。

票数 7
EN

Stack Overflow用户

发布于 2022-11-15 23:30:20

以下是我所做的,以防有人还在寻找解决方案。我创建了自己的类型并扩展到UserConfig

代码语言:javascript
运行
复制
...
import type { InlineConfig } from 'vitest';
import type { UserConfig } from 'vite';

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}
...

然后我将config对象的类型转换到我的自定义接口-

代码语言:javascript
运行
复制
export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: {
      web: [/\.[jt]sx?$/],
    },
    setupFiles: './setupVitest.ts',
  },
  build: {
    target: 'esnext',
  },
} as VitestConfigExport);

这还为新的test属性启用了intellisense。另外,您不需要声明/// <reference types="vitest" />。也许能帮上忙。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72146352

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档