cypress: mocha type definitions conflict with @types/jest

There’s a PR open to fix this here: https://github.com/cypress-io/cypress/pull/7194

Also running into this with the latest versions of Cypress and Jest. I’ve tried every workaround I’ve found in all of these issues/threads and nothing works. We’re currently on slightly older versions of Cypress and we have to resort to a custom module and custom namespace with copy-pasted types just to get by. Upgrading to the latest Cypress packages breaks this horribly.

Having Cypress and Jest in the same repo seems like a pretty common situation to me, so I’m surprised and annoyed that this is still an issue.

I am also running into this issue with Cypress 4.4. Is there a reason this isn’t a peer dependency or is being redeclared and rewritten?

This has just started happening for me with the release of 4.3.0 (I’d skipped 4.2.0 due to #6752): https://travis-ci.com/github/textbook/starter-kit/jobs/309601851

@sainthkh, here’s the simplest possible Cypress setup that shows a difference between 4.2.0 and 4.3.0. Running this (in an empty subdirectory) works:

npm i typescript jest @types/jest cypress@4.2.0
echo "console.log('hello world')" > hello.ts
./node_modules/.bin/tsc hello.ts

If you replace 4.2.0 with 4.3.0 (or 4.5.0, for that matter), the compilation fails.

This setup does not even have any tests (either Jest or Cypress), it looks like simply installing @types/jest and @types/mocha at the same time is enough to trigger this. It looks like Cypress 4.2.0 did not depend on @types/mocha, but instead bundled own types in ./node_modules/cypress/types/mocha/index.d.ts… so at least code that didn’t require Cypress worked just fine.

(This is the situation I currently have - my Cypress tests are JS instead of TS, but I cannot update to Cypress 4.3.0 since it breaks other, non-Cypress-related TypeScript code in the same repo…)

The cause is easy to understand.

mocha claims the ownership of global variables:

declare var test: Mocha.TestFunction;

And jest claims the ownership of them, too:

declare var test: jest.It;

Result: clash and error.

But the problem is a bit hard to solve. Because types cannot be imported with a condition like “when @types/jest exist, import these, else, import those”. And there is no official solution. TypeScript team answer is:

Exclude one or the other files from your compilation, or update the declaration files to not both claim to be stomping on the same global variable. That’s it.

I guess patch-package can be a solution. I’m experimenting things.

I also ran into this issue on Cypress 4.3.0.

I have a blunt workaround that worked for me, which was to patch the @types/mocha with patch-package and comment out the conflicting/duplicated declarations:

diff --git a/node_modules/@types/mocha/index.d.ts b/node_modules/@types/mocha/index.d.ts
index 10ee78a..45a1a2b 100644
--- a/node_modules/@types/mocha/index.d.ts
+++ b/node_modules/@types/mocha/index.d.ts
@@ -2731,7 +2731,7 @@ declare var suiteTeardown: Mocha.HookFunction;
  *
  * @see https://mochajs.org/api/global.html#beforeEach
  */
-declare var beforeEach: Mocha.HookFunction;
+// declare var beforeEach: Mocha.HookFunction;
 
 /**
  * Execute before each test case.
@@ -2749,7 +2749,7 @@ declare var setup: Mocha.HookFunction;
  *
  * @see https://mochajs.org/api/global.html#afterEach
  */
-declare var afterEach: Mocha.HookFunction;
+// declare var afterEach: Mocha.HookFunction;
 
 /**
  * Execute after each test case.
@@ -2765,7 +2765,7 @@ declare var teardown: Mocha.HookFunction;
  *
  * - _Only available when invoked via the mocha CLI._
  */
-declare var describe: Mocha.SuiteFunction;
+// declare var describe: Mocha.SuiteFunction;
 
 /**
  * Describe a "suite" containing nested suites and tests.
@@ -2786,7 +2786,7 @@ declare var suite: Mocha.SuiteFunction;
  *
  * - _Only available when invoked via the mocha CLI._
  */
-declare var xdescribe: Mocha.PendingSuiteFunction;
+// declare var xdescribe: Mocha.PendingSuiteFunction;
 
 /**
  * Pending suite.
@@ -2800,7 +2800,7 @@ declare var xcontext: Mocha.PendingSuiteFunction;
  *
  * - _Only available when invoked via the mocha CLI._
  */
-declare var it: Mocha.TestFunction;
+// declare var it: Mocha.TestFunction;
 
 /**
  * Describes a test case.
@@ -2814,14 +2814,14 @@ declare var specify: Mocha.TestFunction;
  *
  * - _Only available when invoked via the mocha CLI._
  */
-declare var test: Mocha.TestFunction;
+// declare var test: Mocha.TestFunction;
 
 /**
  * Describes a pending test case.
  *
  * - _Only available when invoked via the mocha CLI._
  */
-declare var xit: Mocha.PendingTestFunction;
+// declare var xit: Mocha.PendingTestFunction;
 
 /**
  * Describes a pending test case.

You put this patch into patches/directory and run a postinstall script to run patch-package (read their README).

The code for this is done in cypress-io/cypress#7352, but has yet to be released. We’ll update this issue and reference the changelog when it’s released.

The code for this is done in cypress-io/cypress#7194, but has yet to be released. We’ll update this issue and reference the changelog when it’s released.

4.2.0 doesn’t have this issue, but it’s happening to me too on 4.3.0.