Cypress: mocha type definitions conflict with @types/jest

[arteforme]

Current behavior:

I'm running into an issue where the types defined for mocha, located at node_modules/cypress/types/mocha results in conflicts with types defined in @types/jest. Below is are the details of one of the various errors that the typescript compiler reports:

    "resource": "/Users/hjm/Source/test/cypress-jest-types-issue/node_modules/@types/jest/index.d.ts",
    "owner": "typescript",
    "code": "2403",
    "severity": 8,
    "message": "Subsequent variable declarations must have the same type.  
            Variable 'beforeEach' must be of type 'HookFunction', but here has type 'Lifecycle'.",
    "source": "ts",
    "startLineNumber": 34,
    "startColumn": 13,
    "endLineNumber": 34,
    "endColumn": 23,
    "relatedInformation": [
        {
            "startLineNumber": 2680,
            "startColumn": 13,
            "endLineNumber": 2680,
            "endColumn": 23,
            "message": "'beforeEach' was also declared here.",
            "resource": "/Users/hjm/Source/test/cypress-jest-types-issue/node_modules/cypress/types/mocha/index.d.ts"
        }
    ]
}

Below is a full list of the errors that appear in my IDE (VS Code):

Desired behavior:

Types do not conflict.

Test code to reproduce

Here's a small repo that demonstrates the issue. Errors can be seen by running npm run tsc.

Forked test-tiny repo and was able to reproduce there as well.

Versions

Core packages needed to see issue are:

"@types/jest": "^25.1.4",
"cypress": "^4.1.0",
"typescript": "^3.8.3"

Current Workaround

Using approach described in this comment from #1319 .

[textbook]

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

[ldipenti]

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

[gunn4r]

Im actually having this issue on 4.2.0. ¯\__(ツ)_/¯

TS 3.7.5
Cypress 4.2.0
@types/jest 25.2.1
@types/mocha resolving to 5.2.7

[danieldelcore]

+1 bumped into this issue using 4.3.0 (also not working for me in 4.2.0)

• "cypress": "^4.3.0"
• "typescript": "^3.8.3"
• "@types/jest": "^25.1.4"

Would recommend this thread for workarounds but it would be good to get an official fix for this

[kaiyoma]

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.

[gunn4r]

@kaiyoma Also doing the copy pasted types thing to get by this for now.

[rszalski]

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:

Patch contents

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).

[kiwdahc]

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?

[bwiklund]

we need to upgrade to the latest cypress (from 3.4.x) because of another bug, but this is blocking us

[jrr]

This can repro with https://github.com/cypress-io/cypress-and-jest-typescript-example .

(specifically, master is currently at commit https://github.com/cypress-io/cypress-and-jest-typescript-example/commit/194918bcfc2023495fe7de090a69d24e5404e40d )

The project doesn't have a webpack build, but running tsc directly provokes it:

• npm i
• ./node_modules/.bin/tsc

node_modules/@types/mocha/index.d.ts:2680:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'beforeEach' must be of type 'Lifecycle', but here has type 'HookFunction'.

2680 declare var beforeEach: Mocha.HookFunction;
                 ~~~~~~~~~~

  node_modules/@types/jest/index.d.ts:35:13
    35 declare var beforeEach: jest.Lifecycle;
                   ~~~~~~~~~~
    'beforeEach' was also declared here.

Upgrading Cypress to latest (4.4.1) doesn't fix it.

[jennifer-shehane]

@sainthkh any thoughts on these type def conflicts also?

[sainthkh]

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.

[sainthkh]

I've been investigating and experimenting and came to conclusion that I need more information.

With my current test setup and test command, ./node_modules/.bin/tsc --lib es5,es6,dom ./cypress/integration/examples/actions.spec.ts, the clash can happen even with Cypress 1.2.0. Because Cypress started with mocha bundled into it from the beginning (#1044, #1048). There's always a possibility that clash can happen.

Can anyone give me a repo that the clash didn't happen before 4.2.x or 4.3.x and happens after 4.2.x or 4.3.x? And tell me how to fix it?

[pasieronen]

@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 [email protected]
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...)

[sainthkh]

@pasieronen Thanks for the example. Confirmed and trying to find the solution.

[benwiley4000]

I'm having similar problems, this, and also related to chai/bluebird, with the latest cypress. The fact that we are forced to include the third-party type references in the new versions means these sorts of type conflicts are kind of inevitable. it would be nice if the Cypress-specific types were a separate type which could be included on its own to avoid the type conflicts with other modules.

Edit: Hm, seems older versions have the same issue. Giving up on using TypeScript with Cypress for now.

[ztolley]

Having the same. Jest tests show errors especially bad when used in combination with testing-library as this extends the expect object and expect command but Typescript uses the Mocha one instead

[jennifer-shehane]

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

[jrr]

@jennifer-shehane I'd like to try out the fix. Is it possible to reference that fork from my project? (or do I need to wait for it to hit develop, and install the pre-release version as described here?)

It's apparently not as simple as referencing the branch in package.json 😐:

-    "cypress": "4.2.0",
+    "cypress": "sainthkh/cypress#issue-6690",

[sainthkh]

@jrr The cypress folder inside node_modules is actually the cli folder inside the project. That's why it doesn't work in that simple way.

[cypress-bot[bot]]

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.

[mikhail-angelov]

the another ugly work around could be
add type to main tsconfig.json

  "compilerOptions": {
...
    "types": ["cypress"]
  }

[cypress-bot[bot]]

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.

[jrr]

The fix works for me! Cypress, Jest, and my build are all working with this version from develop.

Thanks @bahmutov and @sainthkh !

[cypress-bot[bot]]

Released in 4.6.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.6.0, please open a new issue.