Adding custom commands throws IDE errors

[rkorebrits]

Current behavior:

When adding a new custom command, like Cypress.Commands.add('login', (user) => {

JetBrains (GoLand in my case) doesn't recognise the command and throws an error on it.

This shows errors all they way up the file tree in my IDE

Desired behavior:

I would like to be able to register the command to the IDE to prevent theseissues

Versions

Goland 2020.1

[singhrajkr]

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

[rkorebrits]

Thanks @SinghRajKr! That's it. And yes, absolutely using TypeScript :-)

[rkorebrits]

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.

[rkorebrits]

Sorry, I'm just reopening again, as I'm having some issues adding the type. This kind of works: however when I add in the correct type, it breaks:

Any ideas?

[singhrajkr]

You need to add namespace into same file where you have defined the login command.

[rkorebrits]

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

[DavidVaness]

i totally followed that guide and got the same error 🙄

[jennifer-shehane]

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.

[jennifer-shehane]

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 = {}) => {})

[rkorebrits]

Thanks @jennifer-shehane It doesn't seem to work here, see screenshots:

Typed (breaks): p.s. I've also tried referencing ./index.d.ts, but get the same warning

Untyped ("works"):

[antal-bukos]

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 🤞 .

[rockResolve]

Possible solution is that adding import and export statements requires explicitly declaring Cypress on the global namespace: https://github.com/cypress-io/add-cypress-custom-command-in-typescript/issues/2#issuecomment-389870033

[distinctdan]

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.

[khashaba]

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!

[Garrett-R]

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 = {}) => {})

This solved it for me. Like @rkorebrits, I'm also on an IntelliJ IDE (PyCharm 2021.2.2).

and here's the versions I'm using:

[mjustin]

@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?

[khashaba]

@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

[rkorebrits]

Thanks all, I just tried again and it all seems to work fine now. It might be fixed with one of the upgrades? We're on 8.5 now