Vitest加载自定义路径失败：vite-tsconfig-paths配置无效求助

问题分析 #

核心问题在于：Vite通过vite-tsconfig-paths插件能正常解析~/别名，但Vitest运行测试时未加载对应的路径解析配置，导致无法识别~/schema这类自定义路径。另外你的React测试环境设置为node，这会导致DOM相关测试报错，需要改为jsdom环境。

解决方案 #

方案一：让Vitest复用Vite配置（推荐，减少重复配置） #

直接继承Vite的插件、别名等设置，避免重复编写配置：

1. 修改frontend/apps/admin/vitest.config.ts：

import { defineConfig } from 'vitest/config'
import viteConfig from './vite.config'

export default defineConfig({
  ...viteConfig,
  test: {
    globals: true,
    environment: 'jsdom', // React项目必须使用jsdom环境
  },
})

2. 简化vitest.workspace.ts，直接引用各应用的Vitest配置文件：

import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  'frontend/apps/*/vitest.config.ts',
])

方案二：手动配置Vitest的路径解析 #

如果不想继承Vite配置，可以单独在Vitest配置中添加插件和别名：

修改frontend/apps/admin/vitest.config.ts：

import { defineConfig } from 'vitest/config'
import tsconfigPaths from 'vite-tsconfig-paths'
import path from 'path'

export default defineConfig({
  plugins: [tsconfigPaths()], // 加载tsconfig路径解析插件
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src'), // 手动配置别名映射
    },
  },
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

关键注意事项 #

• React测试必须使用jsdom环境，node环境没有DOM API，无法正常渲染组件
• Vitest不会自动继承Vite的插件配置，必须显式在Vitest配置中加载vite-tsconfig-paths或手动配置别名
• 工作区配置中无需重复设置每个应用的root和setupFiles，直接引用对应应用的Vitest配置文件即可

内容的提问来源于stack exchange，提问作者The Blind Hawk