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

Question

我通过npm init vue@latest创建了一个新的Vue项目(使用vitest))。./src/components中有一个__test__目录，其中包含一个组件单元测试。

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

因此，当按类型结构使用文件夹时(您可能也想按功能结构使用文件夹)，项目可能看起来像

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

请不要误解我，这不是一个关于个人喜好的问题。我只是想知道vitest想让我怎么做。

因为当我的代码旁边有一个__test__目录时，你为什么不把规范文件放在代码旁边，然后去掉这个目录呢?

。

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

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

这也可能与如何将测试保存在Vite项目的源目录之外有关?因为对我来说，还不清楚为什么有人会在组件目录中初始化一个__test__目录的项目(为什么不为视图也是?)并将"exclude": ["src/**/__tests__/*"],行添加到tsconfig.app.json文件中。如果您在没有__test__目录的情况下保持测试，并将它们置于src目录之外或紧挨着组件/视图/js/ts文件，会发生什么?

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__文件夹only因为把模板放在一起的人认为把测试放在单独的文件夹中会更干净。这是固执己见。

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

测试文件的常用模式有:

• test在组件的文件夹中(通常每个组件都有自己的文件夹)。这种模式在Angular和React世界中更流行)
• 在根tests文件夹中进行测试，该文件夹模仿整个项目的文件夹(在Vue世界中更流行)
• 在多个__tests__文件夹中进行测试，每个项目文件夹一个。(我在一些项目中看到过这种情况，不一定与一个框架或另一个框架相关)。

以上都是固执己见的，vitest将与任何一个工作，没有区别。

个人建议:尝试每种模式至少6个月，你可能会注意到你工作方式的细微差异。你可能最终会更喜欢其中一个，而且你可能会觉得使用它更有效率。这是你的模式。

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