I created a new Vue project via npm init vue@latest ( with vitest ). Inside ./src/ponents is a __test__ directory containing a ponent unit test.

Is it intended to create another __test__ directory for the ./src/views directory if you want to test your view files?

So when using a folder by type structure ( you might also want to use a folder by feature structure ) the project might look like

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

Please don't get me wrong, this is not a question about personal preferences . I just would like to know how vitest wants me to do it.

Because when having a __test__ directory right next to my code, why wouldn't you put the spec files right next to the code and get rid of the directory?

E.g.

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

It would be nice if one could explain the "mon" way of using vitest inside Vue projects because until now I added a test directory right next to the src directory and mirrored the structure but it seems vitest/Vue prefers a different approach.

This might also be related to How to keep tests outside from source directory in Vite projects? because to me it's not clear why someone would initialize a project with a __test__ directory in the ponents directory only ( why not for views too? ) and add the line "exclude": ["src/**/__tests__/*"], to the tsconfig.app.json file. What would happen if you keep your tests without having a __test__ directory and have them outside the src directory or right next to your ponent/view/js/ts files?

I created a new Vue project via npm init vue@latest ( with vitest ). Inside ./src/ponents is a __test__ directory containing a ponent unit test.

Is it intended to create another __test__ directory for the ./src/views directory if you want to test your view files?

So when using a folder by type structure ( you might also want to use a folder by feature structure ) the project might look like

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

Please don't get me wrong, this is not a question about personal preferences . I just would like to know how vitest wants me to do it.

Because when having a __test__ directory right next to my code, why wouldn't you put the spec files right next to the code and get rid of the directory?

E.g.

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

It would be nice if one could explain the "mon" way of using vitest inside Vue projects because until now I added a test directory right next to the src directory and mirrored the structure but it seems vitest/Vue prefers a different approach.

This might also be related to How to keep tests outside from source directory in Vite projects? because to me it's not clear why someone would initialize a project with a __test__ directory in the ponents directory only ( why not for views too? ) and add the line "exclude": ["src/**/__tests__/*"], to the tsconfig.app.json file. What would happen if you keep your tests without having a __test__ directory and have them outside the src directory or right next to your ponent/view/js/ts files?

• javascript
• vue.js
• vitest

• Looks like you added a link to another question on this subject. I'm guessing you're hoping for a different answer than: "it doesn't matter", which is, in fact, the case. Note the accepted answer on the linked question confirms __tests__ is a convention: "You are not required to keep this folder. It's a convention[...]" – tao Commented Jul 6, 2022 at 19:08
• @tao yes you are right. I think I should change my question to: After setting up a fresh new project, what needs to be done if vitest tests should live inside the root dir in a vitest dir or vitest tests should live right next to the code or vitest tests live inside a __test__ directory in each directory – user19025657 Commented Jul 7, 2022 at 5:35
• Before you ask what needs to be done, you have to define the intended oute. If the intended oute is: "so nothing breaks and vitest works as intended", then the answer is: "Nothing needs to be done. You can place your tests inside the ponents folder directly. vitest will run them" – tao Commented Jul 8, 2022 at 15:10
• You say don't understand why someone would create a __tests__ folder in ponents, but not in views. Because the person who made that template was not consistent. Most likely, they made the folder in ponents to avoid clutter (because that folder typically gets a lot of files). views rarely has more than 10 files (typically 2-5), so the need to unclutter it is smaller. But I can't definitively answer your question, because I don't know who put that there and what they were thinking. I suggest you ask it on Vue's discord channel, although I doubt you'll get a definitive answer. – tao Commented Jul 8, 2022 at 15:17

1 Answer 1

The short answer is: vitest does not care where you put your files. It is un-opinionated and it doesn't have an intended folder structure. It will run any tests it finds.

The default value of include (which determines where vitest looks for test files) is:

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

You can inspect it by running

include { defaultConfig } from 'vitest/config'

console.log(defaultConfig.include);

in your vitest.config.file.

It includes any file, in any folder, ending in .test or .spec immediately followed by .{js,mjs,cjs,ts,mts,cts,jsx,tsx}.

An easy way to test is to move your test files around. You'll notice they'll still be picked up when running tests.

Your template came with __test__ folders only because whoever put that template together thought it would be cleaner to have tests in separate folders. That's opinionated.

If you have a different opinion, vitest will still work, seamlessly.

The mon patterns for test files are:

• test inside the ponent's folder (typically associated with each ponent having its own folder). This pattern is slightly more popular in Angular and React worlds)
• tests inside a root tests folder, which mimics the entire project's folder (slightly more popular in Vue world)
• tests inside multiple __tests__ folders, one for each project folder. (I've seen this in a few projects, not necessarily associated with one framework or another).

All of the above are opinionated and vitest will work with any, making no difference.

Personal advice: try out each pattern for at least 6 months, you might notice minor differences in how you work. You might end up liking one more over the others and it might feel like you're more efficient using it. That's the pattern for you.

Unless you're in a team, of course, and you need to agree with the rest of the team on the pattern. In 90% of the cases, the most senior dev in the team will set the pattern.