0
729
ViewsHow to keep tests outside from source directory in Vite projects?
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?
1 answers
Answer question0
To get the test folder outside the source folder :
- create a vitest folder on root dir
- move
./src/components/__tests__to./vitest/__tests__ - On test *.spec file, you will import components with alias
@
import HelloWorld from '@/components/HelloWorld.vue'
- in tsconfig.app.json
- change
"exclude": ["src/**/__tests__/*"],to"exclude": ["vitest/**/__tests__/*"],
- 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
