Cypress TypeError: 'JQuery' is not defined

Issue

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 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;

• What is in the docs
• This
• And this
• And this
• And this in both tsconfig files

Cypress Version

10.1.0

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

Solution

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 }],

Answered By - mcclosa