10

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?

2 Answers2

12

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

flydev
  • 4,327
  • 2
  • 31
  • 36
  • 1
    @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). – Fody Feb 25 '22 at 10:45
  • 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 –  Feb 25 '22 at 11:04
  • 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 Jun 01 '22 at 20:43
  • @Eria you need to define an alias. Check ‘resolve.alias’ in the vite doc and there: https://stackoverflow.com/a/66559769/774432 – flydev Jun 02 '22 at 00:06
  • I have it already : https://stackoverflow.com/questions/72468249/vitest-src-folder-alias-not-resolved-in-test-files – Eria Jun 02 '22 at 08:07
  • 1
    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. – meshantz Nov 30 '22 at 20:00
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 .",

panduuu
  • 11
  • 1