React-TS模板下Vite.config.ts中Vitest配置报错排查

问题原因 #

Vite核心配置的UserConfigExport类型本身不包含test字段，该字段属于Vitest（Vite官方测试框架）的配置项，未安装Vitest及相关类型时，TypeScript会将其识别为未知属性。

解决步骤 #

1. 安装必要依赖 #

先安装Vitest和jsdom（用于模拟浏览器环境）：

npm install -D vitest jsdom

使用yarn或pnpm的对应命令：

yarn add -D vitest jsdom
# 或
pnpm add -D vitest jsdom

2. 修正Vite配置文件 #

有两种方式消除类型错误：

方式一：使用Vitest的defineConfig

直接从vitest/config导入defineConfig，它会自动合并Vite和Vitest的配置类型：

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

方式二：保留Vite的defineConfig并引入Vitest类型

在配置文件顶部添加Vitest的类型引用，让TypeScript识别test字段：

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

完成以上步骤后，类型错误即可消除，同时可正常使用Vitest的jsdom测试环境。

内容的提问来源于stack exchange，提问作者Harry Chaklader