'Cypress causing type errors in jest assertions

I had been using react-testing-library as well as @testing-library/jest-dom/extend-expect. I installed Cypress yesterday, and now I'm getting Typescript errors on all my jest matchers:

Property 'toEqual' doesn't exist on type 'Assertion'. Did you mean 'equal'?

It looks like it's getting the type of expect from the wrong assertion library or something? Also, expect(...).to.equal(...) doesn't even work either.

I actually tried installing @types/jest and yarn appears to have succeeded but it's not listed in my package.json's devDependencies.

Here's my tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "jsx": "react",
    "skipDefaultLibCheck": true,
    "types": [
      "node",
      "cypress",
      "jest"
    ]
  },
  "include": [
    "src"
  ]
}

I'll also mention that all my cy calls in my cypress tests are getting a cy is not defined error from ESLint.

Solution 1:^[1]

I ran into this problem yesterday. It seems that what you are saying is correct, cypress and jest both declares types for expect. In this case the cypress declaration seem to be the one that is picked up. Here's an issue from the cypress repo regarding this:

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

The solution mentioned in there worked for me. You need to exclude the jest spec files from in tsconfig.json and then declare a tsconfig.spec.json where they are explicitly included again.

tsconfig.json:

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

tsconfig.spec.json:

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

With this in place, both my (angular 8) app compiles fine and I can run the jest tests without issue. Here's another example mentioned in the issue with a similar fix being implemented:

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

Solution 2:^[2]

There is an official Cypress repo that shows how to fix this exact problem https://github.com/cypress-io/cypress-and-jest-typescript-example

I wasn't able to get that method to work in one of my projects, so I am using this as a workaround:

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

Solution 3:^[3]

This worked for me in my tsconfig.json

I had to add

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

Complete code here

{
  "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"
  ]
}

Solution 4:^[4]

Finally I found the solution! Just add "cypress" to the exclude property of your main tsconfig.json:

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

You should add also another tsconfig.json for your cypress tests. You can create a cypress folder and add that tsconfig.json there. The following is my Cypress tsconfig.json:

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

Solution 5:^[5]

There are three steps to make it disappear.

In your /cypress/ directory add tsconfig.json.

Paste the following content as in this example:

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

In your original tsconfig.json add

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

to the top level configuration. That's it.

A few extra notes:

If your cypress/tsconfig.json complains about include, exclude you may need to overwrite their values as they are inherited from the original file. In my case adding
```
"exclude": [],
```
...has solved the problem.
May be trivial but remember to use .ts extension to files for your spec from now on.

Solution 6:^[6]

The simplest way for solving this issue is to add this line to tsconfig.json:

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

I am attaching my tsconfig file for better understanding. You can see the addition in 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
  }
}

Solution 7:^[7]

In my case it helps the only one thing: adding "types": ["jest"] to "compilerOptions":

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

Solution 8:^[8]

I came across this issue today also - what caused it was moving my Cypress folder from / to src/test. I moved it back to avoid the conflict.

Solution 9:^[9]

I came across the same problem and after trying the above options, a combination two solutions worked. Adding below to test file

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

and this one to tsconfig.json(included to stop jest @types errors)

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

Solution 10:^[10]

I had the same problem with cypress + jasmine and nothing would help.

Finally, I ended with copying the jasmine expect declaration and putting it in a new file /test/global.d.ts:

declare function expect<T>(actual: T): jasmine.Matchers<T>;

Might be worth mentioning that in my tsconfig.json the folder is explicitly included as follows:

{
    "include": ["test/**/*", ...]
}

This caused yet another shadowing of the dreaded cypress and silenced the compilator.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Johan Persson
Solution 2	Mark Jackson
Solution 3	Hello-World
Solution 4	tdy
Solution 5
Solution 6	Udi Mazor
Solution 7	Ruslan Korkin
Solution 8	DistroDisco
Solution 9	Prashanti.D
Solution 10	Pawel Gorczynski

'Cypress causing type errors in jest assertions

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]