解决create-vue项目中Vitest误执行Playwright测试的问题

在Vue.js官方脚手架工具create-vue项目中，开发者发现了一个关于测试工具配置的有趣问题。该项目同时使用了Vitest和Playwright两种测试框架，但在实际运行过程中出现了测试执行范围不明确的情况。

问题背景

create-vue项目采用了现代化的测试策略，将单元测试和端到端测试分开管理：

• 单元测试使用Vitest框架
• 端到端测试(e2e)使用Playwright框架

按照理想的项目结构，这两种测试应该互不干扰，各自在自己的范围内执行。然而，开发者发现Vitest会错误地尝试执行位于e2e目录下的Playwright测试文件，导致测试失败。

问题分析

经过排查，问题根源在于Vitest配置文件中的排除规则不够精确。原配置使用了：

exclude: [...configDefaults.exclude, 'e2e/*']

这种写法只能排除e2e目录下的直接子文件，而不会递归排除子目录中的文件。因此，像e2e/frontend/login.spec.ts这样的深层嵌套测试文件仍然会被Vitest捕获并尝试执行。

解决方案

正确的做法是使用双星号(**)通配符，它可以匹配任意层级的子目录。修改后的配置如下：

exclude: [...configDefaults.exclude, 'e2e/**']

这个改动确保了Vitest会忽略e2e目录及其所有子目录中的所有文件，彻底解决了测试框架交叉执行的问题。

技术原理

在文件路径匹配中，通配符有不同的含义：

• 单星号(*)：匹配单个路径段中的任意字符
• 双星号(**)：匹配任意数量的路径段

这种差异在测试配置中尤为重要，因为现代项目通常有复杂的目录结构。使用双星号可以确保排除规则应用到整个目录树，而不仅仅是顶层目录。

最佳实践

对于同时使用多种测试框架的项目，建议：

1. 为不同类型的测试创建清晰的目录结构
2. 在各自的配置文件中明确包含/排除规则
3. 使用双星号确保规则应用到所有子目录
4. 定期验证测试执行范围是否符合预期

这个问题虽然看似简单，但它体现了现代JavaScript项目中配置细节的重要性。正确的工具配置可以避免许多潜在的冲突和意外行为，确保开发流程的顺畅。