Cypress + TypeScript 3.6.2 errors due to outdated JQuery types

[wKovacs64]

Current behavior:

node_modules/cypress/types/jquery/index.d.ts:8155:87 - error TS2344: Type '"button" | "view" | "screenX" | "screenY" | "altKey" | "bubbles" | "cancelable" | "changedTouc
hes" | "ctrlKey" | "detail" | "eventPhase" | "metaKey" | "pageX" | "pageY" | "shiftKey" | ... 13 more ... | "touches"' does not satisfy the constraint '"repeat" | "butto
n" | "code" | "view" | "location" | "screenX" | "screenY" | "y" | "altKey" | "bubbles" | "cancelable" | "changedTouches" | "ctrlKey" | "detail" | "eventPhase" | ... 55 m
ore ... | "DOM_KEY_LOCATION_STANDARD"'.
  Type '"toElement"' is not assignable to type '"repeat" | "button" | "code" | "view" | "location" | "screenX" | "screenY" | "y" | "altKey" | "bubbles" | "cancelable" |
"changedTouches" | "ctrlKey" | "detail" | "eventPhase" | ... 55 more ... | "DOM_KEY_LOCATION_STANDARD"'.

8155         TData = null> extends Partial<Pick<PointerEvent & KeyboardEvent & TouchEvent, 'altKey' | 'bubbles' | 'cancelable' |
                                                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8156         'changedTouches' | 'ctrlKey' | 'detail' | 'eventPhase' | 'metaKey' | 'pageX' | 'pageY' | 'shiftKey' | 'view' |
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8157         'char' | 'charCode' | 'key' | 'keyCode' | 'button' | 'buttons' | 'clientX' | 'clientY' | 'offsetX' | 'offsetY' |
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8158         'pointerId' | 'pointerType' | 'screenX' | 'screenY' | 'targetTouches' | 'toElement' | 'touches'>> {
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

In particular:

Type '"toElement"' is not assignable to type ...

Desired behavior:

No TypeScript errors.

Steps to reproduce: (app code and test code)

I have a few "real" projects exhibiting this issue, but here's one:
wKovacs64/pwl#88

I can try to craft a more minimal reproduction as time permits.

Versions

Cypress: 3.4.1
TypeScript: 3.6.2

Possible fix:

cypress/cli/package.json

Line 66 in c912e09

"@types/jquery": "3.3.6",

Bumping @types/jquery from 3.3.6 to 3.3.31 (the latest version at this time) should resolve the issue (technically, 3.3.23 was the first version that worked, but may as well go for the latest?). It worked if I manually replaced the contents of <my_project>/node_modules/cypress/types/jquery with the @types/jquery@3.3.31 files, although I was not able to get dtslint to pass in the Cypress project itself due to conflicts somewhere:

Error: Errors in typescript@next for external dependencies:
../node_modules/@types/jquery/JQuery.d.ts(12941,5): error TS2375: Duplicate number index signature.
../node_modules/@types/jquery/legacy.d.ts(201,5): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(5,1): error TS6200: Definitions of the following identifiers conflict with those in another file: TypeOrArray, Node, htmlString, Selector, SuccessTextStatus, ErrorTextStatus, TextStatus, SuccessCallback, ErrorCallback, CompleteCallback, StatusCodeCallbacks, CSSHook, CallbackBase, Callback, Duration, Tweener, PropHook, EasingMethod, AnimationHook, Queue, QueueFunction, SpeedSettings, EventHandlerBase, EventHandler, TypeEventHandler, _TypeEventHandlers, SpecialEventHook, CoordinatesPartial, ValHook, _Falsy, jQuery, $, _Event, _UIEvent, _MouseEvent, _DragEvent, _KeyboardEvent, _TouchEvent, _FocusEvent
../node_modules/@types/jquery/misc.d.ts(24,9): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(1140,9): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(3788,9): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(3799,9): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(6405,9): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(6432,9): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(6550,9): error TS2374: Duplicate string index signature.
../node_modules/@types/jquery/misc.d.ts(6625,9): error TS2374: Duplicate string index signature.

Looks like the same thing the automated PR (#3343) ran into back in March.

Additional information:

• toElement is an old Internet Explorer property. The DOM types that ship with TypeScript no longer include it in lib.dom.d.ts. See this comment. I think it was removed in microsoft/TypeScript#32578. The version of @types/jquery (3.3.6) currently shipped with Cypress still use this property.

• The @types/jquery package went through a restructure in 3.3.21. Prior to that, the toElement key in question was present on the JQuery.Event<...> interface in index.d.ts. The new definition of JQuery.Event now lives in misc.d.ts along with some new related types (TriggeredEvent, EventBase, etc.). None of these extend the same list of event types as the old version, and since none of them reference the now-absent toElement, the problem is resolved.

• Since @types/jquery 3.3.22 does not work but 3.3.23 does, I narrowed down the commits between those version release dates to c6fe757c..bf2beee3 and I'm pretty sure it was fixed in [jquery] Improve declaration of Events API. DefinitelyTyped/DefinitelyTyped#30144.

[brandonb927]

I found that adding "skipLibCheck": true to my compilerOptions in tsconfig.json alleviated this issue after noticing that the officially-supported config recommends that when using Browserify as the preprocessor.

[bahmutov]

so I see this is jQuery + testing library issue when finding and triggering elements, which clashes with older jQuery TS definition in Cypress.

1. before upgrading types/jquery from "@types/jquery": "3.3.6" I would like to have a failing test in cli/types/tests/cypress-tests.ts that recreates the problem when running npm run types in CLI folder
2. upgrading just the types could work, even if the actual jQuery in packages/driver is still on v2 and the work to upgrade it is ongoing bump jquery to 3.1.1 #1229

[wKovacs64]

I don't think testing-library has anything to do with it - I have another project that does not use T-L and it still produces this error when attempting to use TypeScript 3.6.2.

I've updated the Additional Information section after learning more about the situation.

I'm not sure how to test it since the types tests are run with multiple versions of TS. Using the problematic event property (toElement) should succeed prior to TS 3.6.2, and fail as of TS 3.6.2, so... unless there's some way to specify TS versions for individual dtslint assertions that I don't know about... ¯\_(ツ)_/¯

[maryhipp]

We are seeing this exact same thing when trying to build our package
cypress@3.4.1
typescript@3.6.2

../node_modules/cypress/types/jquery/index.d.ts:8155:87 - error TS2344: Type '"button" | "view" | "altKey" | "bubbles" | "cancelable" | "changedTouches" | "ctrlKey" | "detail" | "eventPhase" | "metaKey" | "pageX" | "pageY" | "shiftKey" | "char" | "charCode" | ... 13 more ... | "touches"' does not satisfy the constraint '"repeat" | "button" | "code" | "view" | "y" | "altKey" | "bubbles" | "cancelable" | "changedTouches" | "ctrlKey" | "detail" | "eventPhase" | "metaKey" | "pageX" | "pageY" | "shiftKey" | ... 54 more ... | "DOM_KEY_LOCATION_STANDARD"'.
  Type '"toElement"' is not assignable to type '"repeat" | "button" | "code" | "view" | "y" | "altKey" | "bubbles" | "cancelable" | "changedTouches" | "ctrlKey" | "detail" | "eventPhase" | "metaKey" | "pageX" | "pageY" | "shiftKey" | ... 54 more ... | "DOM_KEY_LOCATION_STANDARD"'.

8155         TData = null> extends Partial<Pick<PointerEvent & KeyboardEvent & TouchEvent, 'altKey' | 'bubbles' | 'cancelable' |
                                                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8156         'changedTouches' | 'ctrlKey' | 'detail' | 'eventPhase' | 'metaKey' | 'pageX' | 'pageY' | 'shiftKey' | 'view' |
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8157         'char' | 'charCode' | 'key' | 'keyCode' | 'button' | 'buttons' | 'clientX' | 'clientY' | 'offsetX' | 'offsetY' |
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8158         'pointerId' | 'pointerType' | 'screenX' | 'screenY' | 'targetTouches' | 'toElement' | 'touches'>> {
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[wandri]

Same problem for us. Do you know which packages to downgrade to avoid this error ?

[wKovacs64]

@wandri TypeScript itself - 3.5.3 is fine, 3.6.2 is not.

[JustFly1984]

Having same issue, ts 3.6.2

[cypress-bot]

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

[JustFly1984]

is there any movement on this release? this bug is ruining our pre-commit script

[cypress-bot]

Released in 3.5.0.