Yesterday, I encountered a puzzling issue where both Cypress and Jest were declaring types for expect. It seems that the declaration from Cypress was being prioritized. There's an interesting discussion on this matter in a GitHub issue on the Cypress repository:

https://github.com/cypress-io/cypress/issues/1603

The solution provided there resolved the problem for me. By excluding jest spec files in the tsconfig.json and then explicitly including them in a separate tsconfig.spec.json, the issue was mitigated.

Here's how you can set up the configurations:

{
  ...,
  "exclude": [
    "**/*.spec.ts"
  ]
}

tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "include": [
    "**/*.spec.ts"
  ],
  ...
}

Following this setup, my Angular 8 application compiled successfully, and running Jest tests posed no issues. Another example mentioned in the same GitHub issue demonstrated a similar approach to fixing the problem:

https://github.com/neiltownsley/react-typescript-cypress/pull/1/files#diff-e5e546dd2eb0351f813d63d1b39dbc48R29

Note: As of Mar 9, 2023, with Cypress v10, the main cause of the error is attributed to ./cypress.config.ts. You may want to explore Marcus Fonseca's suggested solution first.

If you're encountering the issue mentioned in the GitHub problem "New Cypress 10 global TypeScript type conflicts with Jest expect", there is a workaround available.

To resolve this problem, simply exclude ./cypress.config.ts in your tsconfig.json:

"exclude": [
  "./cypress.config.ts",
  //other exclusions that may help https://github.com/cypress-io/cypress/issues/22059#issuecomment-1428298264
  "node_modules",
  "cypress",
  "**/*.cy.tsx"
]

A developer from Cypress suggests:

We haven't made significant changes to our globals for version 10. Based on my testing, most cases were resolved by adding ./cypress.config.ts to the tsconfig.exclude property. Including cypress.config.ts in type checking loads the cypress types, causing interference with jest tests.

Need help fixing a specific issue with Cypress? Check out the official Cypress repository for step-by-step solutions: https://github.com/cypress-io/cypress-and-jest-typescript-example

If you're like me and that method didn't work for your project, here's a workaround I found helpful:

import { expect } from '@jest/globals';

Success! I've discovered the solution at last. Simply insert "cypress" into the exclude section of your primary tsconfig.json:

{
  ...YOUR_CONFIGS,
  "compilerOptions": {
    ...YOUR_CONFIGS,
    "typeRoots": [ // TO INCLUDE ALL TYPES
      "node_modules/@types"
    ],
  },
  "exclude": ["cypress"], 
}

Additionally, don't forget to set up a separate tsconfig.json for your cypress tests. Set up a cypress folder and place the new tsconfig.json inside. Here's an example of my Cypress tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["./**/*.ts"]
}

Here is the solution I found for my tsconfig.json file:

I made the following addition:

  "include": ["src/**/*"],

For the complete code implementation, see below:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports" : true,
    "esModuleInterop" : true,
    "sourceMap": true,
    "experimentalDecorators": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

There are various scenarios that may lead to the above-mentioned problem. In my personal experience, the issue was resolved by including ./cypress.config.ts in the tsconfig.exclude property. By excluding this file from type checking, it prevents the cypress types from interfering with your jest tests. I suggest trying this approach if you are utilizing TypeScript for your cypress configuration.

To make it vanish, follow these three steps.

1. Create a tsconfig.json file in your /cypress/ directory.

2. Copy and paste the code from this example:

   {
       "extends": "../tsconfig.json",
       "compilerOptions": {
          "noEmit": true,
          "types": ["cypress"]
       },
       "include": [
           "../node_modules/cypress",
           "./**/*.ts"
       ]
   }
   

3. Add the following to your original tsconfig.json:

   {
     ...
     "exclude": ["cypress"]
     ...
    }
   

This simple configuration should do the trick!

A couple of extra things to note:

1. If you encounter issues with include, exclude in your cypress/tsconfig.json, try adding:

   "exclude": [],
   

   This might resolve any problems you face.

2. Don't forget to use the .ts extension for your spec files going forward.

To resolve this issue effectively, simply insert the following line into your tsconfig.json file:

  "include": [
    "src/**/*.ts"
  ],

If you refer to my attached tsconfig file, you will find the mentioned addition on lines 3-5.

{
  "compileOnSave": false,
  "include": [
    "src/**/*.ts"
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

I encountered a similar issue and after experimenting with various solutions, I found that a combination of two approaches did the trick. I added the following code snippet to my test file:

import { expect } from '@jest/globals';.

Additionally, I included the following configuration in my tsconfig.json file to prevent jest @types errors:

{ "include": [
    "**/*.spec.ts"
  ] 
}

For me, the solution was simple: including

"types": ["jest"]

{
  "compilerOptions": {
    ...
    "types": ["jest"],
   ...
  },     
}

To configure the tsconfig.json file, insert the following:

"exclude": ["src/**/*.spec.ts"]

For the tsconfig.spec.json, include the following:

"exclude": [""],

"include": ["src//*.spec.ts", "src//*.d.ts"]

After utilizing the ng add @cypress/schematic command to configure Cypress, I came across this particular line in my cypress/tsconfig.json file:

"extends": "../tsconfig.json",

It became evident that ./tsconfig.json and ./cypress/tsconfig.json were conflicting with each other since they had contradictory directives regarding file inclusion and exclusion. To rectify this issue, I followed these steps:

1. Delete

   "extends": "../tsconfig.json"

   from cypress/tsconfig.json
2. Include

   "include": ["**/*.cy.ts"]

   in cypress/tsconfig.json
3. In accordance with Marcus' answer, update ./tsconfig.json as follows:

"exclude": [
  "./cypress.config.ts",
  "node_modules",
  "cypress"
]

My troubleshooting journey began when I started using @testing-library/cypress. Upon reviewing the documentation, it was recommended to include certain configurations in the tsconfig.json. However, this led to unexpected issues.

{
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"]
  }
}

To resolve the problem, I moved these configurations to a separate ./cypress/tsconfig.json file instead of keeping them in the main ./tsconfig.json.

While working on an Angular project, I encountered a similar issue. I was utilizing Jasmine for Unit Tests (UT) and Cypress for End-to-end tests (e2e), but I also wanted to incorporate component testing into my workflow. However, I ran into difficulties with the typings for Jasmine and Mocha. To resolve this issue, I utilized Typescript references in the tsconfig.json.

This solution was inspired by a helpful Github comment

Snippet from tsconfig.json:

"include": ["src"],
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.spec.json" }, { "path": "./tsconfig.cy.json" }]

Snippet from tsconfig.spec.json:

{
"extends": "./tsconfig.json",
"compilerOptions": {
    "baseUrl": "./src",
    "types": ["jasmine"],
    "composite": true,
    "declaration": true
},
"files": ["testing/jest-global-mocks.ts"],
"include": ["app/**/*.spec.ts"],
}

Snippet from tsconfig.cy.json:

{
"extends": "./tsconfig.json",
"compilerOptions": {
    "composite": true,
    "declaration": true
},
"include": ["src", "cypress", "node_modules/cypress"],
"exclude": ["**/*.spec.ts"],
}

Today, I encountered a similar issue when I relocated my Cypress folder from the root directory to src/test. To resolve the conflict, I ended up moving it back.

I encountered a similar issue while working on my Next.js app. After some troubleshooting, I found that this configuration in tsconfig.json resolved the problem for me:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "types": ["cypress", "node", "jest"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Having reviewed the solutions provided earlier, I decided to opt for a different approach by changing the file names in Cypress to adhere to their current naming convention, preventing them from being mistaken as Jest files from the beginning.

Below outlines the steps I took to implement this adjustment.

1. File renaming:

My-Cypress-Test.spec.js will now be known as My-Cypress-Test.cy.js

DISCLAIMER: THIS COMMAND WILL AFFECT ALL FILES WITH SIMILAR NAMES IN ANY SUBDIRECTORY

find ./**/cypress/** -name '*.spec.js' -exec sh -c 'mv "$0" "${0%.spec.js}.cy.js"' '{}' \;

This command assumes that your cypress tests are located in the default folder named "cypress".

If this is not the case, adjust the command accordingly or navigate to the cypress test directory and execute it using ./

2. Updating Cypress configuration to account for new file extensions (if necessary)

In cypress.config.js:

replace

specPattern: "./cypress/integration/**/**/*.spec.js",

with

specPattern: "./cypress/integration/**/**/*.cy.js",

3. (Optional): Ensuring git recognizes this as a file rename

I have observed git often treats the old file as deleted and the renamed file as new, potentially disrupting file history / git blame, etc.

To address this, simply execute git add . in any parent directory of the renamed files.

I encountered the same issue, but I found a simple solution that worked like a charm: just follow the official tutorial at https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfigjson

1. Avoid adding any cypress-related configurations to your main tsconfig file
2. Follow the steps outlined in the tutorial to create a new tsconfig file within the cypress folder (simply copy and paste)
3. Sit back and enjoy a seamless experience

If you're interested in learning more about the conflict between Jest and Cypress, check out this documentation link: https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest

For a potential solution, take a look at this example: https://github.com/cypress-io/cypress-and-jest-typescript-example