Cypress: Usage with Nuxt, Typescript and Jest

[MartinMalinda]

I've played with Cypress for the first time today and the first impression is great, thanks for all the work on this! That being said, while Cypress ran fine, the main app showed a lot of TS errors in build.

There are existing repositories that I look into for guidance:

• https://github.com/chymz/nuxt-starter - uses Nuxt, Jest, Cypress, but not TypeScript.
  
  
  
  • https://github.com/cypress-io/cypress-and-jest-typescript-example - this one is promising but I didn't manage to make it work like it. Maybe it's Nuxt-TS that changes something.
  
  
  • https://github.com/melrefaie/nuxt-cypress- Nuxt and Cypress, but no Jest and no TypeScript
  
  

Test code to reproduce

Minimal reproduction:

https://github.com/MartinMalinda/nuxt-jest-cypress-typescript

npx cypress open works
npm run dev errors out with type conflicts

[MartinMalinda]

One solution that would probably work would be installing cypress to a different folder with a separate package.json. But it seems like this against the philosophy of Cypress that it should be part of the main application.

[jennifer-shehane]

type conflicts shown below. Most of these are duplicate of #6690

[MartinMalinda]

These errors still persist in 4.6.0

https://github.com/MartinMalinda/nuxt-jest-cypress-typescript

[brian-mann]

@MartinMalinda I believe you need to add a tsconfig.json file in your cypress folder to the effect of this...

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

@tgriesser can you weigh in here?

[MartinMalinda]

Thanks @brian-mann. I've already experimented with this separate tsconfig with no luck. The errors appear even if there's no tsconfig.json at all and only /// <reference types="cypress" /> which means that only mention of cypress type will create conflicts.

[MartinMalinda]

But it seems like I had types under wrong place. I've pushed latest to master: https://github.com/MartinMalinda/nuxt-jest-cypress-typescript/blob/master/cypress/tsconfig.json

[tgriesser]

From your latest commit, I believe it should just be "types": ["cypress"], not "types": ["@types/cypress"] because Cypress ships with its own types.

[tgriesser]

I'm also not sure that you need the "include": ["../node_modules/cypress", in there

[MartinMalinda]

@tgriesser I see, thank you. The conflicts when running npm run dev are still there. Visual Studio picks up the types well, the errors only appear during build which suggests it might be nuxt-ts that causes problems.

[MartinMalinda]

I managed to get the build running.

I did these two things:

1) removed extend from the tsconfig.json in cypress folder - I guess the extend merged the types, not overrode it and that caused the conflicts
2) I added cypress to exclude in the root tsconfig.json

I'll try run tests, use TS etc to check if this solves everything.

[MartinMalinda]

I made it work in the main app as well. It seems like extend can be done - the types get overriden properly. The build happens correctly for both cypress and the main app, it's just that there's type errors in VS Code. They disappear if I remove the extend or if I add /// <reference types="cypress" /> at the top of the file.

[yunlonglee]

Thx i also make it work when I added tests/e2e to exclude in the root tsconfig.json

tests/e2e is my cypress folder

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@types/node", "@nuxt/vue-app", "@types/jest"]
  },
  "exclude": ["tests/e2e"]
}

[jennifer-shehane]

Closing as resolved.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.