11

I created a new Vue project via npm init vue@latest ( with vitest ). Inside ./src/components is a __test__ directory containing a component 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
├── components
│   ├── 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
├── components
│   ├── 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 "common" 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 components 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 component/view/js/ts files?

Improve this question
4
  • 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[...]" 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 Commented Jul 7, 2022 at 5:35
  • Before you ask what needs to be done, you have to define the intended outcome. If the intended outcome 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 components folder directly. vitest will run them" Commented Jul 8, 2022 at 15:10
  • You say don't understand why someone would create a __tests__ folder in components, but not in views. Because the person who made that template was not consistent. Most likely, they made the folder in components 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. Commented Jul 8, 2022 at 15:17

1 Answer 1

Reset to default
18
+50

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 common patterns for test files are:

  • test inside the component's folder (typically associated with each component 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

do you know why it excludes the vitest tests in the tsconfig.app.json? ( "exclude": ["src/**/__tests__/*"], ) . When having the spec files right next to the code, there will be no __tests__ directory anymore so one might remove this line. But what is its purpose? Because I think TS must be able to compile it, no?
@Question3r, if you look into tsconfig.vitest.json, it extends tsconfig.app.json and overrides exclude with an empty array. I believe this means: any ts errors in test files should be ignored by build/serve. Should only be considered when testing. You might get a better answer in Vue's discord "vue-3-advanced" channel. I haven't used tsconfig references before.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.