CODEWITHSUNDEEP
typescriptcypress
mcclosa
mcclosa

Reputation: 1445

Cypress TypeError: 'JQuery' is not defined

In cypress/commands.ts trying to get the type JQuery but it returns an eslint error in VSCode

'JQuery' is not defined.eslint[no-undef](https://eslint.org/docs/rules/no-undef)

JQuery is not defined

JQuery definitely seems to exist as you can see from the screenshot above, but perhaps because there are 2 definitions of the same type there's a conflict?

command.ts

/// <reference types="cypress" />

declare global {
  namespace Cypress {
    interface Chainable {
      getElByAttr(attr: string, val: string): Chainable<JQuery<HTMLElement>>;
      getByTestId(testId: string, length?: number): Chainable<void>;
    }
  }
}

Cypress.Commands.add('getByTestId', (testId, length = 1) => {
  cy.get(`[data-testid="${testId}"]`).should('have.length', length);
});

Cypress.Commands.add('getElByAttr', (attr = 'name', val) => {
  return cy.get(`[${attr}=${val}]`);
});

export {};

root tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "incremental": true,
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js", "jest.config.js", "__tests__/**/*.js"]
}

I have tried to add a tsconfig.json into my /cypress folder but that didn't resolve the issue, this is what I tried.

/cypress/tsonfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

I've tried restarting my TS server in VSCode every time I make any change, but nothing seems to have resolved the issue

It looks like someone else also had this issue here

Also tried adding "types": ["cypress"] into either tsconfig.json

FWIW I've also tried the following;

Cypress Version

10.1.0

Truthfully, at a loss. Any help would be greatly appreciated.

Upvotes: 2

Views: 1810

Answers (3)

Mostafa
Mostafa

Reputation: 45

This is not a direct answer but it helps to avoid using the 'JQuery' interface completely so you won't encounter the error at all. So the suggestion is to use ReturnType to infer the type instead of declaring it directly:

declare global {
  namespace Cypress {
    interface Chainable {
      getElByAttr(attr: string, val: string): ReturnType<typeof cy.get>;
      getByTestId(testId: string, length?: number): ReturnType<typeof cy.get>;
    }
  }
}

Upvotes: 0

krebbl
krebbl

Reputation: 186

The only thing that worked for me was to add /* global JQuery */ at the top of the typescript file where JQuery is used.

Upvotes: 1

mcclosa
mcclosa

Reputation: 1445

So found the solution was with my eslint.

I needed to add the following to my extends options in my .eslintrc file

'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',

And had to add the following to my rules option

'@typescript-eslint/no-namespace': ['error', { allowDeclarations: true }],

Upvotes: 2

Related Questions