cypress: Adding custom commands throws IDE errors

@rkorebrits I hope you are using TypeScript for Cypress instead of JavaScript. If yes then You are getting this error due to the type definition. Please declare something like below in your commands.ts

declare namespace Cypress {
  interface Chainable {
    login(user: User): void;
  }
}

i totally followed that guide and got the same error 🙄

After relooking at this, it seems that adding the reference to the index.d.ts file at the top of the support/index.ts file will cause the types to work correctly.

@rkorebrits Can you confirm that this fixes your types?

There’s some discussion here on this situation.

support/index.ts

/// <reference path="../support/index.d.ts" />

Cypress.Commands.add('login', (userType, options = {}) => {})

I’ve confirmed that this example from our docs to define Type definitions for custom commands does not work when the support/index file where the custom command is defined is a TypeScript file. If you renamed the support/index.ts file to support/index.js (being a JavaScript file) - the type definition works for the spec.

Repro

cypress/support/index.d.ts

declare namespace Cypress {
  interface Chainable {
    login(user: any): void
  }
}

cypress/support/index.ts - works if cypress/support/index.js

Cypress.Commands.add('login', (userType, options = {}) => {})

cypress/integration/spec.ts

it('login', () => {
  cy.login('admin')
})

Not sure if this is some bug or issue with our documentation that needs updating.

@khashaba

for me i solved this issue by simple removing the type. ex

declare namespace Cypress {
  interface Chainable {
    login(user: any): void
  }
}

I change it to:

declare namespace Cypress {
  interface Chainable {
    login(user: any): void
  }
}

and it works fine with me.

Unless I’m missing something, those two are identical. Copy/paste error?

I updated the example

@khashaba

for me i solved this issue by simple removing the type. ex

declare namespace Cypress {
  interface Chainable {
    login(user: any): void
  }
}

I change it to:

declare namespace Cypress {
  interface Chainable {
    login(user: any): void
  }
}

and it works fine with me.

Unless I’m missing something, those two are identical. Copy/paste error?

After relooking at this, it seems that adding the reference to the index.d.ts file at the top of the support/index.ts file will cause the types to work correctly.

@rkorebrits Can you confirm that this fixes your types?

There’s some discussion here on this situation.

support/index.ts

/// <reference path="../support/index.d.ts" />

Cypress.Commands.add('login', (userType, options = {}) => {})

I still facing the same issue.

I tried adding the path in the index.js and still happning

it seems to be a bug.

for me i solved this issue by simple removing the type. ex

declare namespace Cypress {
  interface Chainable {
    login(user: User): void
  }
}

I change it to:

declare namespace Cypress {
  interface Chainable {
    login(user: any): void
  }
}

and it works fine with me. but I still want to add the types. I mean that’s why I’m using typescipt!

I’m seeing really weird behavior with this. I had it working with the declare namespace Cypress {, then I decided to add more types in a types/globals.d.ts file, and now Cypress is erroring out and not recognizing any of my custom commands. Also, in my commands file, I’ve lost the typing for Cypress and all of the global variables that it exports. And the weirdest part is after deleting my types folder, all the cypress errors won’t go away. Maybe I’ve just messed something up and not realized it, but it seems Cypress is being really weird here.

Here’s my types/globals.d.ts file if it makes a difference:

interface Window {
    API_BASE_URL: string;
}

EDIT: I was able to get it working by moving my custom command typings from commands.d.ts into the main commands file, commands.ts. That shouldn’t change anything, so something weird is going on with Cypress’s typings. I don’t know if you guys have considered converting to using modules instead of global vars, might clear all this up.

We’ve also ran into this error. Adding the type declaration to global.d.ts instead of support/index.d.ts seems to have helped. Maybe it works for others too 🤞 .

That gives me the same result… I tried that first initially, then I found this article: https://docs.cypress.io/guides/tooling/typescript-support.html#Types-for-custom-commands where it says that you should put it in index.d.ts

p.s. perhaps it would be a good idea to add that in the comments of the commands.ts/js files to show how it’s done.