Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@testing-library/cypress] Missing JQuery typings #40099

Open
simjes opened this issue Nov 3, 2019 · 8 comments · May be fixed by #40210

Comments

@simjes
Copy link
Contributor

@simjes simjes commented Nov 3, 2019

After the latest release of typings for @testing-library/cypress (5.0.1) there is an issue where it won't find required JQuery typings.

The typings for @testing-library/cypress depends upon Cypress 3.5.0, where the correct JQuery typings are included, but I assume the reason that this breaks in real projects is because of npm flattening dependencies.

I tried adding /// <reference typings="cypress" /> explicitly to index.d.ts, but then there is a typings collision with Jest since they also declare typings in the global scope.

I would love to get some input on a solution for this.

#39394

@wKovacs64

This comment has been minimized.

Copy link
Contributor

@wKovacs64 wKovacs64 commented Nov 3, 2019

Do we have a reproduction repo for this? @types/testing-library__cypress@5.0.1 and cypress@3.6.0 are working fine together for me in a couple different real projects.

@aleccool213

This comment has been minimized.

Copy link
Contributor

@aleccool213 aleccool213 commented Nov 4, 2019

I am getting the same result. I am using @types/testing-library__cypress@5.0.1 and cypress@3.6.0. The reason it won't work for me is that I am using pnpm and it requires every repo declare transitive dependancies.

cc: @elliottsj

@simjes

This comment has been minimized.

Copy link
Contributor Author

@simjes simjes commented Nov 5, 2019

I created a reproduction repo here: simjes/cypress-typings-reproduction. Install and npm run tscompile.

They are also having problems with this in the downshift-js/downshift repo. Ref comments in #39394

@wKovacs64

This comment has been minimized.

Copy link
Contributor

@wKovacs64 wKovacs64 commented Nov 5, 2019

Both downshift and your reproduction are missing "types": ["cypress"] in tsconfig.json (docs). That seems to fix both projects on my end.

@simjes

This comment has been minimized.

Copy link
Contributor Author

@simjes simjes commented Nov 6, 2019

doh, I updated the repo 🤦. Could you take another look @wKovacs64 ?

Seems to work fine in the IDE, but running tsc still gives me the same error.

@wKovacs64

This comment has been minimized.

Copy link
Contributor

@wKovacs64 wKovacs64 commented Nov 6, 2019

A couple things going on after your changes:

  • you have to use tsc --project cypress if you have a nested tsconfig.json like that
  • your Cypress tsconfig.json is missing esnext from the lib array (you'll probably get IterableIterator errors without it)
    • could use extends in the nested one as an alternative, but it probably doesn't matter
@AlgusDark

This comment has been minimized.

Copy link

@AlgusDark AlgusDark commented Nov 7, 2019

@wKovacs64 wouldn't be better to explicitly import JQuery?

import {
  configure,
  Matcher,
  MatcherOptions as DTLMatcherOptions,
  SelectorMatcherOptions as DTLSelectorMatcherOptions
} from '@testing-library/dom'
+ import 'cypress/types/jquery'
@AlgusDark AlgusDark linked a pull request that will close this issue Nov 7, 2019
7 of 7 tasks complete
@wKovacs64

This comment has been minimized.

Copy link
Contributor

@wKovacs64 wKovacs64 commented Nov 7, 2019

@AlgusDark Not sure, but the Cypress docs mention using the types option to avoid conflicts:

The types will tell the TypeScript compiler to only include type definitions from Cypress. This will address instances where the project also uses @types/chai or @types/jquery. Since Chai and jQuery are namespaces (globals), incompatible versions will cause the package manager (yarn or npm) to nest and include multiple definitions and cause conflicts.

I suspect if your project used @types/jquery and the version didn't match the jQuery types bundled with Cypress, you'd run into conflicts by importing like that.

@NicholasBoll might have a more informed opinion here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.