Vue项目中Vitest的官方推荐测试目录结构是什么？

视图目录是否需要创建__tests__目录 #

官方通过npm init vue@latest初始化的项目，仅在components目录下生成__tests__目录，只是因为初始模板自带组件示例及对应的测试样例，并非规则限定只有组件能使用该目录结构。如果需要为视图文件编写测试，完全可以在./src/views路径下按照相同规则创建__tests__目录存放测试用例，这种做法完全符合官方约定。

官方支持的测试文件组织方案 #

Vitest 本身没有强制要求测试文件的存放位置，默认配置下会自动匹配项目内所有.test./.spec.后缀的文件作为测试用例，三种主流组织方式均被官方支持：

• 业务模块下独立__tests__目录集中存放：即脚手架默认方案，同模块的所有测试文件集中放在模块下的__tests__文件夹中，优势是业务代码和测试代码边界清晰，浏览业务文件时不会被测试文件干扰。目录结构示例：

src
├── components
│   ├── MyComponent.vue
│   └── __tests__
│       └── MyComponent.spec.vue
└── views
    ├── MyView1.vue
    ├── MyView2.vue
    └── __tests__
        ├── MyView1.spec.vue
        └── MyView2.spec.vue

• 测试文件与业务文件同级放置：将.spec/.test后缀的测试文件直接和对应的业务组件、视图放在同一目录，不需要单独建测试目录。优势是测试文件和对应业务文件的关联更直观，引用业务文件的相对路径更短。目录结构示例：

src
├── components
│   ├── MyComponent.vue
│   └── MyComponent.spec.vue
└── views
    ├── MyView1.vue
    ├── MyView1.spec.vue
    ├── MyView2.vue
    └── MyView2.spec.vue

• src目录外独立test目录镜像结构：在src同级创建独立test目录，完全镜像src内的目录结构存放测试文件，是很多中大型项目常用的方案。优势是测试代码和业务代码完全分离，不会侵入业务目录结构，只需要修改Vitest配置的include字段指向外部test目录即可正常使用。

常见配置问题说明 #

为什么tsconfig.app.json要排除src/**/__tests__/* #

tsconfig.app.json是面向生产环境代码的TS校验配置，测试文件中会引入Vitest提供的测试全局API（如describe、it、expect）、测试专用类型声明，这些内容不属于生产构建的范畴。将测试目录排除后，可以避免生产构建流程误识别、打包测试代码，同时避免测试专用的类型声明引发生产环境的类型校验报错。

不使用__tests__目录会产生什么影响 #

只要对应调整配置，不会产生任何功能性问题：

• 如果选择测试文件和业务文件同级：只需要把tsconfig.app.json里的排除规则修改为匹配src/**/*.spec.*、src/**/*.test.*即可，Vitest不需要额外修改配置就能正常识别运行测试用例，生产构建也不会受到影响。
• 如果选择把测试文件放在src目录外：只需要调整Vitest配置中的include匹配路径指向外部test目录，同时为测试文件单独配置引入Vitest类型的TS配置即可，生产构建默认不会编译src目录外的内容，不需要额外配置排除规则。

注：官方模板中默认采用__tests__目录的方案，只是给新用户提供的一个开箱即用的参考样例，并非强制标准，开发者可以根据团队习惯自由选择上述三种方案，不存在不符合规范的问题。

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