How to implement cypress and vitest in the same project without type clashing

[daribock]

I have conflict using vitest and cypress in the same project. I already tried the example from cypress on how to implement cypress and jest in the same project without type clashingbut this didn't work. So I am helpless right now. :(

I also asked for help in discord.

[freakzlike]

I would suggest to store all cypress related files (tests, configs, utils...) within one directory and create a separate tsconfig.json for it, as it is the same as in the example.

src/
  tests/
    unit.spec.ts
cypress/
  specs/
    cypress.spec.ts
  tsconfig.json # Directory level of cypress directory
tsconfig.json # Root level (don't include cypress directory)

Another approach would be to use tsconfig project reference, where you have multiple tsconfig files on root level. Example:
https://github.com/vuejs/create-vue-templates/tree/cb26a573fbe4878b17a10594abb94e24ddf1bdc7/typescript-vitest-cypress

[ghiscoding]

I'm facing the exact same problem and it seems that the only approach I found to be working and not too annoying is to let Cypress win globally and then use import { expect, vi } from 'vitest'; so that Vitest uses its own expect interface instead of Chai (Cypress). This is the best I could find but it is not really what I want, I wish that I could use both Cypress and Vitest globally from any folders since in our structure we have Cypress tests (__e2e__/*.cy.ts) and Vitest (__tests__/*.spec.ts), I really hope that one day TypeScript would provide a way to override types by their file extension.

[AriPerkkio]

is to let Cypress win globally and then use import { expect, vi } from 'vitest';

This is exactly what I've been using as well. Packages that automatically pollute the global typings are frustrating. This same issue was present with Jest + Cypress as well - and there was no easy solutions available. Luckily with Vitest I've been able to turn off globals and use only imports for expect and test. I think I have example set up at this repository: https://github.com/AriPerkkio/vite-everything

There's also local-cypress package which should help but I have not tried that one.

[FDiskas]

I would vote for - "cypress or any other E2E toolset should live his own life - it has no relation to the source code rather then it's artifact. So remove it from main project - move to separate repository or add it as a mono repo package"
I personally moved it to a directory <ROOT>/cypress did like npm init -y && npm install cypress then created tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress"]
  }
}