13

Running npm init vue@latest with the following setup

enter image description here

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?

Improve this question

2 Answers 2

Reset to default
14
+100

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'
  1. in tsconfig.app.json
  • change "exclude": ["src/**/__tests__/*"], to "exclude": ["vitest/**/__tests__/*"],
  1. 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

enter image description here

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

6 Comments

@medsmh you don't necessarily need the __tests__ folder now. That convention is mainly useful when unit tests are close to the src files (but adjust exclude if you remove it).
I'm not sure if I should stick to a vitest directory and move all those tests into it or if I should create a tests directory, move the generated cypress folder into it and create a __tests__ directory for the Vitest stuff
I want to perform the same thing. I applied this solution. But it seems the @ in imports is not resolved. Import cannot be found.
@Eria you need to define an alias. Check ‘resolve.alias’ in the vite doc and there: stackoverflow.com/a/66559769/774432
I found vscode didn't like this (when the vue project is in a subfolder anyway) and would mark the import as "not found" even though it worked when building/running tests. To fix, I also had to add "vitest/**/__tests__/*" to the includes section in tsconfig.app.json. It looks a bit odd, but works since tsconfig.vitest.json contains "exclude": []", which clears the list of excludes. (the other option would be to duplicate the includes from tsconfig.app.json while adding "vitest/**/__tests__/*" there.
|
1

on the latest release of vue 3, follow @flydev instruction and update your package.json file

from "test:unit": "vitest --environment jsdom --root src/",

to

"test:unit": "vitest --environment jsdom --root .",

Improve this answer

Comments

Your Answer

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