VS Code IntelliSense不支持Vitest匹配器问题求助

问题背景 #

从Create React App（CRA）迁移到Vite并接入Vitest后，测试用例能正常运行，但VS Code无法识别toBeVisible()、toBeInTheDocument()等断言匹配器，无智能提示。

已尝试无效方案 #

• 新建纯Vite+Vitest项目，匹配器提示正常，但不想重新迁移现有项目文件
• 安装@types/jest依赖，仅能显示部分匹配器，且缺少toBeVisible()，不符合预期

当前配置 #

vitest.config.js（test部分）

test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/config/vite/vitest.setup.js",
    coverage: {
      reporter: ["text", "html"],
      exclude: ["node_modules/", "./src/config/vite/vitest.setup.js"],
    },
    css: true,
  },

vitest.setup.js

import "@testing-library/jest-dom";

可行解决方案 #

1. 完善Vitest配置文件结构 #

确保vitest.config.js完整导出配置（迁移项目易遗漏此步骤）：

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

export default defineConfig({
  plugins: [react()], // 确保React插件已配置
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/config/vite/vitest.setup.js",
    coverage: {
      reporter: ["text", "html"],
      exclude: ["node_modules/", "./src/config/vite/vitest.setup.js"],
    },
    css: true,
  },
})

2. 配置TypeScript/JavaScript类型识别 #

在项目根目录的tsconfig.json（或jsconfig.json）中添加类型声明，让VS Code正确识别匹配器：

{
  "compilerOptions": {
    // 保留原有配置，新增以下类型
    "types": ["vitest/globals", "@testing-library/jest-dom"]
  }
}

• vitest/globals：对应Vitest配置中的globals: true，让全局expect、test等函数拥有正确类型
• @testing-library/jest-dom：扩展expect的匹配器类型，覆盖toBeVisible()、toBeInTheDocument()等

3. 清理CRA残留的Jest配置 #

删除项目中CRA遗留的Jest相关内容，避免VS Code混淆Jest与Vitest类型：

• 删除根目录的jest.config.js、jest.setup.js
• 删除package.json中的jest字段

4. 重启VS Code的TypeScript服务 #

配置更新后重启TS服务生效：

1. 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板
2. 搜索并执行TypeScript: Restart TS Server

5. 检查依赖版本兼容性 #

确保核心依赖版本兼容（建议锁定稳定版本）：

{
  "devDependencies": {
    "vitest": "^0.34.0",
    "@testing-library/react": "^14.0.0",
    "@testing-library/jest-dom": "^6.0.0",
    "jsdom": "^22.0.0",
    "@vitejs/plugin-react": "^4.0.0"
  }
}

内容的提问来源于stack exchange，提问作者Gokul Rajan