Cypress causing type errors in jest assertions

Question

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.

Since Cypress v10 the [main cause](https://github.com/cypress-io/cypress/issues/22059#issuecomment-1148921141) of the error is `./cypress.config.ts`. Consider to try [Marcus Fonseca's answer first](https://stackoverflow.com/questions/58999086/cypress-causing-type-errors-in-jest-assertions/72663546#72663546) — Michael Freidgeim, Mar 08 '23 at 22:07

score 71 · Answer 1 · edited Mar 08 '23 at 22:10

71

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

NOTE 9 Mar 2023: Since Cypress v10 the main cause of the error is ./cypress.config.ts. Consider to try Marcus Fonseca's answer first

edited Mar 08 '23 at 22:10

Michael Freidgeim

26,542
16
152
170

answered Dec 06 '19 at 09:38

Johan Persson

1,875
11
11

Do you mean the Cypress `.spec` files? – foakesm Aug 19 '21 at 08:32
2

@foakesm Sorry if it is unclear from the text above. The base `tsconfig.json` excludes the _jest_ `.spec` files, and then the `tsconfig.spec.json` (that jest uses) includes them. For this to work, we're assuming you Cypress tests are not in files named `*.spec.ts`. Does that answer your question? – Johan Persson Aug 24 '21 at 14:01
This also worked when dealing with the same issue between Cypress + Jasmine in an Angular workspace. Thanks! – Jaime Still Aug 08 '22 at 12:25
This problem goes into Karma/Jasmine in Angular. My solution was to close all *.spec.ts files and do the exclude/include. It seems that Angular-files needs a "re-boot" to get the changes correct. – Steffo Dimfelt Nov 30 '22 at 11:04
This approach has drawback with VSCODE hints. VSCODE uses typescript server, which will not work with two tsconfig files. Better approach in this case will be go with ```import { expect } from '@jest/globals';``` – georgelviv Mar 23 '23 at 15:24
Works for me! I was looking for working solution between cypress component testing and jasmine unit testing in one directory. – Verri Jun 30 '23 at 06:52

score 60 · Answer 2 · answered Dec 05 '20 at 04:53

60

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';

answered Dec 05 '20 at 04:53

remjx

4,104
3
34
32

I have followed the official Cypress repo. Thanks for the link. – Rick Oct 04 '21 at 09:22
This was the only thing working for me, it would be nice to have it solved properly though :/. – iMe Dec 08 '22 at 14:43
1

After exhausting my entire list of expletives, the link to the cypress-and-jest-typescript-example in the official Cypress repo referenced in this answer finally worked for my Angular 15 + Cypress 12 project. The only difference was in tsconfig.json, where I changed the "exclude" to ["src/*.spec.ts"] – Mike Woinoski Dec 12 '22 at 22:18
Same, none of the config shenanigans worked as it was importing cypress straight from node_modules even if there was no cypress folder with test specs. But this is madness and not a real solution. – sasklacz Aug 28 '23 at 23:06

score 54 · Answer 3 · edited May 21 '23 at 16:45

54

Anyone facing this problem in the github issue "New Cypress 10 global TypeScript type conflicts with Jest expect" has a workaround

Fix issue by exluding ./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"
]

From cypress developer:

We didn't change our globals very much for v10. For all the cases I reproduced, it was fixed by adding ./cypress.config.ts to the tsconfig.exclude property. Since the cypress.config.ts is being included in the type checking, it is loading the cypress types which is polluting your jest tests.

edited May 21 '23 at 16:45

Melroy van den Berg

2,697
28
31

answered Jun 17 '22 at 18:40

Marcus Fonseca

871
9
8

1

Thanks this also helped me for our monorepo project. – darmis Sep 20 '22 at 12:24
2

This! And I also had to "exclude" all my cypress test files in my eslint config, because those files also include "cypress" which pollutes the jest typings. – Krisztián Balla Oct 24 '22 at 09:14
Thanks, this helped in our react project as well – ZR87 Jan 30 '23 at 14:43
i don't understand why but i like this magic! thanks :) – Joel Balmer Feb 17 '23 at 10:46
I believe this should be the accepted answer. – Shazil Sattar Jun 23 '23 at 15:15
I'm getting `Cannot find name 'cy'.` – Alexander Aug 07 '23 at 18:39

score 24 · Answer 4 · edited Nov 17 '21 at 04:59

24

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

edited Nov 17 '21 at 04:59

tdy

36,675
19
86
83

answered Nov 16 '21 at 13:52

Flavio Colonna Romano

379
3
5

Great suggestion with the `exclude:[cypress]`, that did the trick for me. – Caleb Waldner Feb 08 '22 at 05:40
This should be the accepted answer. Also exclude cypress.config.ts if you have that as well. – user3932000 Feb 15 '23 at 20:03

score 16 · Answer 5 · answered May 16 '20 at 15:58

16

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

answered May 16 '20 at 15:58

Hello-World

9,277
23
88
154

That was the key for me too. adding `src/**` in the root `tsconfig.json` solved it after looking at the other settings in the example repo: https://github.com/cypress-io/cypress-and-jest-typescript-example. – natterstefan Apr 09 '21 at 19:01

score 13 · Answer 6 · answered Jun 17 '22 at 20:30

13

There are several cases that cause this issue. In my case, It was fixed by adding ./cypress.config.ts to the tsconfig.exclude property. Since the cypress.config.ts is being included in the type checking, it is loading the cypress types which is polluting your jest tests. I believe it will help you if you are using typscript for cypress configuration.

answered Jun 17 '22 at 20:30

F.E

688
6
10

Wondering if there is a way to keep it included but not cause that issue. – Dmitry Jul 02 '22 at 14:05
2

Okay, seems like this is the only possible solution since Cypress v10. They suggest excluding `cypress.config.ts` and including it in the `/cypress/tsconfig.ts` (if you're using separated tsconfig for Cypress ofc) instead. https://github.com/cypress-io/cypress/issues/22059 – Dmitry Jul 02 '22 at 14:12

Greg Wozniak · Answer 7 · 2022-02-24T09:27:26.863

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.

Adding `"exclude": []` solved my issue too, excellent suggestion — Dan Barclay, Apr 21 '22 at 00:27

score 4 · Answer 8 · answered Jul 17 '21 at 12:09

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
  }
}

Thank you! Worked for me in an Ionic app with jasmine/cypress. I needed to close Visual Studio Code and reopen it. — Greg B., Aug 02 '22 at 06:54

score 4 · Answer 9 · answered Jan 19 '22 at 20:36

4

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

answered Jan 19 '22 at 20:36

Prashanti.D

69
6

It works fine but I didn't have to update may tsconfig.sjon – Gnopor Jan 29 '23 at 13:46

score 1 · Answer 10 · answered Jul 29 '20 at 20:00

1

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

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

answered Jul 29 '20 at 20:00

Ruslan Korkin

3,973
1
27
23

score 1 · Answer 11 · edited Dec 11 '22 at 10:08

1

In tsconfig.json add the following,

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

In tsconfig.spec.json add the following

"exclude": [""],

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

edited Dec 11 '22 at 10:08

logi-kal

7,107
6
31
43

answered Dec 05 '22 at 09:52

Abd Alrahman Saleh

11
1

score 0 · Answer 12 · answered Jul 27 '21 at 12:08

0

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.

answered Jul 27 '21 at 12:08

DistroDisco

1
1

score 0 · Answer 13 · answered Aug 04 '22 at 09:48

I had the same problem with Next.js app. This tsconfig.json works 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"]
}

score 0 · Answer 14 · answered Feb 24 '23 at 10:34

After reading through the answers above, I preferred to just rename the Cypress files to their current naming convention, so eslint doesn't consider them Jest files in the first place.

Here's the process I used to make the change.

1. Rename all tests:

My-Cypress-Test.spec.js becomes My-Cypress-Test.cy.js

WARNING: THIS IS A RECURSIVE COMMAND, SO ANY MATCHING FILES IN ANY SUBDIRECTORY WILL BE AFFECTED

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

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

If that's not the case, modify the command below to reflect that, or just cd to your cypress test directory and run it against ./

2. Update your Cypress config to match against the new file extensions (if needed)

In cypress.config.js:

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

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

3. (Optional): Ensure git treats this process as a rename

I've noticed that git tends to consider the old file as deleted and the newly renamed file as a new file, which can break your file history / git blame, etc.

I fix this by simply running git add . in any parent directory of the renamed files.

score 0 · Answer 15 · answered Mar 03 '23 at 13:53

I had the same issue, and the solution is as easy as it sounds: just follow the official tutorial: https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfigjson

Do not add anything related to cypress in your root tsconfig
Create new tsconfig in cypress folder as shown in the tutorial (copy-paste)
Enjoy

score 0 · Answer 16 · answered Apr 13 '23 at 14:55

You can find out about the conflict between Jest and Cypress in the link to the documentation: https://docs.cypress.io/guides/tooling/typescript-support#Clashing-types-with-Jest

Example of a proposed solution: https://github.com/cypress-io/cypress-and-jest-typescript-example

score 0 · Answer 17 · answered Jun 30 '23 at 10:49

I had same problem. In Angular project I was using Jasmine for UT and Cypress for e2e but I wanted to use component testing too. I had got problem with Jasmine and Mocha typings. I solved problem with Typescript references in tsconfig.json.

I was based on Github comment

tsconfig.json (part)

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

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

tsconfig.spec.json

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

score -1 · Answer 18 · answered Aug 18 '21 at 07:46

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.

Cypress causing type errors in jest assertions

18 Answers18

Here's the process I used to make the change.

Linked

Related