Cypress custom commands not recognized by PhpStorm IDE but working in test runner

Question

I use JavaScript files in our Cypress testing.

In commands.js I created a custom command:

Cypress.Commands.add('selectDropdown', (dropdown) => {
    cy.get('#' + dropdown).click();
})

And in my test file I call it:

cy.selectDropdown('dropdown1');

This is working fine when I run the test in test runner. The only issue is, that my IDE (PhpStorm) doesn't recognize that command.

Unresolved function or method selectDropdown()

How to 'tell' the IDE, that such command exists?

UPDATE:

I created an index.d.ts file under support folder (however I use only JS files with Cypress and I have index.js there already).

In that ts file I put:

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

declare namespace Cypress {
    interface Chainable<Subject> {
        selectDropdownValue(dropdown, value): Chainable<(string)>;
    }
}

Now the cy.selectDropdownValue command is recognized in IDE and it seems working fine in test runner, but there are some problems:

1. I'll better avoid creating a new TypeScript file, as I have there index.js already and I am using only JS files in the project

2. declare namespace - 'namespace' and 'module' are disallowed(no-namespace) - this is a Lint warning, so this needs to be replaced somehow

3. Unused interface Chainable. Not sure if I need to have Chainable there as it is unused, and also here selectDropdownValue(dropdown, value): Chainable<(string)>;

Can anyone help, how to recognize the custom command by IDE in JavaScript way, not TypeScript?

Answer 1

Ok, so I solved it this way as I wrote in my update, just disabled the lint check.

I have checked the built in cypress chainable for some original cypress commands, and there is the same structure so I did it the same way and it works.

// tslint:disable-next-line:no-namespace
declare namespace Cypress {
    interface Chainable<Subject = any> {
        selectDropdownValue(dropdown: string, value: string): Chainable<Subject>;
    }
}