[typescript] Cannot find name 'JQuery'

[a-b-r-o-w-n]

• cypress-testing-library version: 5.0.2
• node version: 12.13.0
• npm (or yarn) version: (yarn) 1.19.1

What you did:
Installed @testing-library/cypress in monorepo root (yarn add -W -D @testing-library/cypress).

What happened:
Unrelated build failures in packages/ resulting in

../../../node_modules/@types/testing-library__cypress/index.d.ts:445:77 - error TS2304: Cannot find name 'JQuery'.

Reproduction repository:
https://github.com/a-b-r-o-w-n/testing-library-cypress-bug
https://github.com/a-b-r-o-w-n/testing-library-cypress-bug/runs/303541569

[gabceb]

I just experienced the same thing when bumping to the latest version (5.0.2)

[kentcdodds]

Sorry, I don't have the bandwidth to look at this right now. Anyone is welcome to dig a little bit and suggest a solution.

[simjes]

We've had a discussion about this over in the DefinitelyTyped repo DefinitelyTyped/DefinitelyTyped#40099

[a-b-r-o-w-n]

@simjes that thread does not really offer a solid workaround. In my case I had to add the compiler option --skipLibCheck. Not ideal, but gets me past this error.

I wonder if this would be a problem if this package included its own typings instead of hosting the typings on the definitel-typed project? The problem seems to stem from its usage of the global namespace and the typescript compiler's greediness when loading @types/.

Just a thought. I assume there is some historical context for why the types are not co-located with this project.

[NicholasBoll]

@a-b-r-o-w-n Do you know if there is a node_modules/@types/cypress in your project? If there is, bad things will happen. There also shouldn't be a node_modules/@types/jquery. If these are present and you don't have either dependencies listed in your package.json, then your IDE (VSCode seems to be the worst offender here) has preemptively installed these types for you.

Cypress had a lot of issues with global/namespace conflicts and chose to not directly require any but instead copy/paste type definitions nested in Cypress type definitions. In most cases, this solved namespace collisions assuming the cypress folder explicitly states that only cypress types should be included in the project.

Type definitions were originally a part of this project, but the source code is not in Typescript so the type definitions were moved to DefinitelyTyped: #68

@types/testing-library__cypress updated to no longer require a specific version of cypress: DefinitelyTyped/DefinitelyTyped#41917

Let us know if you are still running into issues.

[JochenDiekenbrock]

I see the same error with @testing-library/cypress version 5.2.1.
There is neither node_modules/@types/cypress nor node_modules/@types/jquery in the monorepo

[NicholasBoll]

@a-b-r-o-w-n I updated the reproduction repo a bit by changing the tsconfig.json

File in full:

{
  "compilerOptions": {
    "outDir": "./lib/",
    "module": "commonjs",
    "lib": ["es2015", "dom"],
    "target": "es5",
    "moduleResolution": "node",
    "strict": true,
    "types": ["cypress"],
  },
  "exclude": [
    "node_modules"
  ],
}

Changes:

diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index dda9816..8bbbb78 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -2,11 +2,12 @@
   "compilerOptions": {
     "outDir": "./lib/",
     "module": "commonjs",
+    "lib": ["es2015", "dom"],
     "target": "es5",
     "moduleResolution": "node",
     "strict": true,
+    "types": ["cypress"],
   },
-  "include": ["./src/**/*"],
   "exclude": [
     "node_modules"
   ],

I added "types": ["cypress"]. That normally would go into a cypress/ directory since cypress would be the only global you'd want in that directory (to prevent issues with jest or jasmine)

I also added the es2015 lib. That works for Chrome and Firefox which Cypress supports without a runtime transpilation. Also Cypress needs the dom library.

I dropped the include. It was interfering. By default it will include all .ts, .tsx and .d.ts files. You could change it to src/**/* it would also fix the issue.

@JochenDiekenbrock Maybe this could help you as well?

[JochenDiekenbrock]

Thank you, @NicholasBoll
The error message in our case is shown when building apps and libs in a (Lerna) monorepo that do not use Cypress at all. There is only one app with Cypress e2e-tests in the monorepo.

Adding "types": ["cypress"] to the apps that do not use Cypress fixes the compile error, but the generated artifacts are different and I'm not sure that they are built correctly. Anyways, having the add the types entry to tsconfigs of other libs/apps does not sound correct.

[NicholasBoll]

@JochenDiekenbrock I'm not sure how your monorepo is set up. The project I work on has a base tsconfig that all packages inherit from that has "types": "jest" since all packages use jest.

Only the cypress folder has a tsconfig with "types": "cypress" in it. The Cypress folder is not in any packages

[NicholasBoll]

For a more concrete example:

• Base tsconfig: https://github.com/Workday/canvas-kit/blob/master/tsconfig.json
• Package tsconfig: https://github.com/Workday/canvas-kit/blob/master/modules/button/react/tsconfig.json
• Cypress tsconfig: https://github.com/Workday/canvas-kit/blob/master/cypress/tsconfig.json

[gnapse]

I hit this issue in a repo that does not have any monorepo/lerna setup. Tried various things from this discussion here and also from the one linked to above in DT, and nothing helped. The only thing that helped was to explicitly install @types/jquery as a dev dependency.

Here's the tsconfig files if that helps:

root tsconfig

{
    "compilerOptions": {
        "noEmit": true,
        "allowJs": true,
        "checkJs": true,
        "target": "es6",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "declaration": true,
        "noImplicitReturns": true,
        "jsx": "react",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "."
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules", "built", "cypress"]
}

cypress/tsconfig.json

{
    "compilerOptions": {
        "strict": true,
        "baseUrl": "../node_modules",
        "target": "es5",
        "lib": ["es5", "dom"],
        "types": ["cypress"]
    },
    "exclude": []
}

[raphaelsaunier]

I ran into the same issue in a monorepo that uses Yarn Workspaces and where Cypress wasn't installed at the root and where no root tsconfig.json was present.

I got rid of the warning with the same workaround that @gnapse proposed, by adding @types/jquery to the "devDependencies" of the package that is using Cypress.

[kentcdodds]

This is probably resolved now that the type defs are built-in.