Vitest项目中多环境测试配置的最佳实践

在Vitest测试框架中，配置不同测试文件使用不同的测试环境(如jsdom和node)是一个常见的需求。本文将深入探讨这一技术问题的解决方案，并分析各种配置方式的优缺点。

问题背景

在测试前端项目时，我们经常需要处理两种类型的测试文件：

1. 组件测试文件(.tsx)：需要jsdom环境模拟浏览器环境
2. 工具函数测试文件(.ts)：只需要node环境

Vitest早期版本提供了environmentMatchGlobs配置来实现这一需求，但该选项已被标记为废弃。开发者尝试使用新的workspace配置来替代，但发现直接在vitest.config.ts中使用内联workspace配置并不生效。

配置方案分析

方案一：使用environmentMatchGlobs(已废弃)

虽然文档标记为废弃，但在某些场景下仍可使用：

export default defineConfig({
  test: {
    environmentMatchGlobs: [
      ['**/*.tsx', 'jsdom'],
      ['**/*.ts', 'node']
    ]
  }
})

方案二：使用workspace配置(推荐)

正确的workspace配置方式是在项目根目录创建vitest.workspace.ts文件：

import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  {
    test: {
      include: ['**/*.tsx'],
      environment: 'jsdom',
      name: 'jsdom-tests'
    }
  },
  {
    test: {
      include: ['**/*.ts'],
      environment: 'node',
      name: 'node-tests'
    }
  }
])

方案三：多项目配置

对于monorepo项目，可以在workspace中引用子项目的配置：

import { defineWorkspace } from 'vitest/config'

export default defineWorkspace([
  'packages/server',
  {
    extends: 'packages/client/vitest.config.ts',
    test: { environment: 'node', name: 'node' }
  },
  {
    extends: 'packages/client/vitest.config.ts',
    test: { environment: 'jsdom', name: 'jsdom' }
  }
])

技术细节解析

1. workspace配置的限制：

   • workspace配置只能在顶层配置文件中使用
   • 内联在子项目配置中的workspace会被忽略
   • 每个workspace项目需要明确的root路径

2. 测试执行方式：

   • 可以使用通配符简化命令：vitest --project=*-tests
   • 每个workspace项目会独立运行测试

3. 配置继承机制：

   • 使用extends可以复用基础配置
   • 同名配置项会被覆盖

最佳实践建议

1. 对于简单项目，可以考虑继续使用environmentMatchGlobs
2. 对于复杂项目，推荐使用workspace配置
3. 保持测试项目命名一致，便于维护
4. 将共享配置(如reporters、coverage)放在根配置中

通过合理使用Vitest的workspace功能，开发者可以灵活地为不同类型的测试文件配置不同的环境，同时保持项目结构的清晰和可维护性。