Cypress Causing Typescript Errors With Jest-Dom Matchers in NextJS

[AtomSpy]

Current behavior

I'm aware Cypress causes type issues when used alongside Jest with typescript. I've followed #22059 and applied the suggested solutions which require excluding "cypress", and "./cypress.config.ts" from the main tsconfig.json file.

The following error still persists error TS2339: Property 'toBeInTheDocument' does not exist on type 'Matchers<void, HTMLElement> & SnapshotMatchers<void, HTMLElement> & Inverse<JestMatchers<void, HTMLElement>> & PromiseMatchers<...>'.

Here's a screenshot of the error

Here's a screenshot of my main ts.config.json file

Here's a screenshot of the ts.config.json file within the cypress folder

Here's a screenshot of package.json

Desired behavior

Jest should not be clashing with Cypress when cypress has been excluded from the main ts.config.json file as suggested in ##22059

Test code to reproduce

https://github.com/kevinstark86/config-sandbox

npm install

npm run pre-commit

Cypress Version

12.6.0

Node version

18.13.0

Operating System

macOS 13.2

Debug Logs

No response

Other

No response

[AtomSpy]

Any updates?

[domvillegas]

I'm experiencing this problem as well.

[AtomSpy]

With over 2700 issues, I'm getting the impression this isn't on anyone's priority list to look into/fix.

[Bohemus307]

Is fixing this a no? Ok I hated to complain and not bring in the solution I found since all others listed in docs etc. did not work for me. Essentially I used Typescript references to split my project. https://www.typescriptlang.org/docs/handbook/project-references.html This allowed me to have both jest and cypress and I found the setup to make a lot more sense this way. It required one more tsconfig.JSON file in my src folder and a few changes to the other 2 tsconfig.JSON in my cypress and root folder.

Root tsconfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "downlevelIteration": true,
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "composite": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "allowSyntheticDefaultImports": true,
    "types": ["node", "jest", "@testing-library/jest-dom"]
  },
  "references": [
    {
      "path": "./src/tsconfig.json"
    },
    {
      "path": "./cypress/tsconfig.json"
    }
  ],
  "exclude": ["node_modules", "./tests/*", "cypress", "./cypress.config.ts"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types.d.ts", "_mocks_/fileMock.js", "__mocks__/styleMock.js"]
}

SRC tsconfig

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "noEmit": false
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "../cypress/**/*.ts",  // Exclude Cypress files from the main application compilation
    "../cypress/**/*.tsx"  // Exclude Cypress files from the main application compilation
  ]
}

Cypress tsconfig

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": false,
    "target": "es5",
    "composite": true,
    "lib": ["es5", "dom"],
    "skipLibCheck": true,
    "types": ["cypress"]
  },
  "include": [
    "../node_modules/cypress",
    "./**/*.ts"
  ],
  "exclude": [
    "../node_modules",
    "../src/tests/*"
  ]
}

[paigen11]

fwiw, in my main tsconfig.json, I had

 "exclude": [
    "node_modules",
    ".next",
    "out",
    "build",
    "cypress.config.ts"
  ],

When I added "cypress" to the exclude array, my TS Jest assertion errors disappeared. All the tests still run as expected.

I cannot believe how long it took me to find the solution that actually fixed this annoying TS papercut. My team has just been dealing with it for months.