Vue 项目中 vitest 的预期测试结构是什么？

Question

我通过npm init vue@latest（使用vitest）创建了一个新的 Vue 项目。里面./src/components是一个__test__包含组件单元测试的目录。

\n

如果你想测试你的视图文件，是否打算__test__为该目录创建另一个目录？./src/views

\n

因此，当使用按类型结构的文件夹时（您可能还想按功能结构使用文件夹），项目可能看起来像

\n

src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyComponent.vue\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 __test__\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyComponent.spec.vue\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.vue\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView2.vue\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 __test__\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.spec.vue\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyView2.spec.vue\n

\n

请不要误会我的意思，这不是个人喜好的问题。我只是想知道 vitest 希望我如何做到这一点。

\n

因为当__test__我的代码旁边有一个目录时，为什么不将规范文件放在代码旁边并删除该目录呢？

\n

例如

\n

src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyComponent.vue\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyComponent.spec.vue\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 views\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.vue\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView1.spec.vue\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 MyView2.vue\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyView2.spec.vue\n

\n

如果有人能够解释在 Vue 项目中使用 vitest 的“常见”方式，那就太好了，因为到目前为止，我在test该目录旁边添加了一个目录src并镜像了结构，但似乎 vitest/Vue 更喜欢一种不同的方法。

\n

这也可能与如何将测试保留在 Vite 项目中的源目录之外？因为对我来说，不清楚为什么有人会__test__仅使用组件目录中的目录来初始化项目（为什么不使用视图呢？）并将该行添加"exclude": ["src/**/__tests__/*"],到 tsconfig.app.json 文件中。如果您在没有__test__目录的情况下保留测试并将它们放在 src 目录之外或紧邻您的 component/view/js/ts 文件，会发生什么？

\n

Answer 1

简短的答案是：vitest 不在乎你把文件放在哪里。它没有固定的观点，也没有预期的文件夹结构。它将运行它找到的任何测试。

include（决定在哪里vitest查找测试文件）的默认值是：

  include: [ '**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}' ],

您可以通过运行来检查它

include { defaultConfig } from 'vitest/config'

console.log(defaultConfig.include);

在你的vitest.config.file。

它包括任何文件夹中以 . 结尾.test或.spec紧随其后的任何文件.{js,mjs,cjs,ts,mts,cts,jsx,tsx}。

一种简单的测试方法是移动测试文件。您会注意到，在运行测试时它们仍然会被选中。

您的模板附带__test__文件夹只是因为将该模板放在一起的人认为将测试放在单独的文件夹中会更干净。这就是固执己见。

如果您有不同的意见，vitest仍然可以无缝地工作。

测试文件的常见模式是：

• 在组件的文件夹内进行测试（通常与具有自己的文件夹的每个组件相关联）。这种模式在 Angular 和 React 世界中稍微流行一些）
• 在根tests文件夹中进行测试，该文件夹模仿了整个项目的文件夹（在 Vue 世界中稍微流行一些）
• 在多个__tests__文件夹中进行测试，每个项目文件夹一个。（我在一些项目中看到过这一点，不一定与一个框架或另一个框架相关）。

以上所有内容都是有观点的，vitest可以与任何内容一起使用，没有区别。

个人建议：尝试每种模式至少 6 个月，您可能会注意到工作方式上的细微差别。您最终可能会比其他人更喜欢其中一个，并且可能会觉得您使用它的效率更高。这就是适合你的模式。

当然，除非您在一个团队中，并且您需要与团队其他成员就模式达成一致。在 90% 的情况下，团队中最资深的开发人员将设定模式。