How to keep tests outside from source directory in Vite projects?

Question

Running npm init vue@latest with the following setup

generates a Vitest spec file inside the src directory. I'm wondering why Cypress e2e tests have a seperate directory and Vitest unit tests are right next to the source code. Are there any reasons?

I want to move those tests to the root directory (equal to cypress), created a vitest directory and moved to spec into it.

The test itself passes but I think I have to change sopme configuration to exclude the tests from the build etc.

Inside the file tsconfig.app.json I changed the line "exclude": ["src/**/__tests__/*"], to "exclude": ["vitest"],.

Is there something else I should do? Or are there any reasons to keep Vitest tests inside the source directory?

Answer 1

To get the test folder outside the source folder :

1. create a vitest folder on root dir
2. move ./src/components/__tests__ to ./vitest/__tests__
3. On test *.spec file, you will import components with alias @

• import HelloWorld from '@/components/HelloWorld.vue'

4. in tsconfig.app.json

• change "exclude": ["src/**/__tests__/*"], to "exclude": ["vitest/**/__tests__/*"],

5. run npm run build && npm run test:unit

---

Would you mind explaining why you keep the tests directory inside the vitest directory?

You are not required to keep this folder. It's a convention, check below 👇

If you want to put the spec file in the tests folder without a subfolder then just add to the vite.config.ts :

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

then also adjust tsconfig.app.json: "exclude": ["vitest/**/*"],

Result of yarn run test:unit