Argument type string is not assignable to parameter type keyof Chainable ... cypress JS

Question

So I'm trying to add a custom command in cypress (commands.js file) like so:

     Cypress.Commands.add("login", (email, password) => {
      cy.intercept('POST', '**/auth').as('login');
      cy.visit('/auth');
      cy.get('[formcontrolname="email"]').type(email);
      cy.get('[formcontrolname="password"]').type(password);
      cy.get('form').submit();
      cy.wait('@login').then(xhr => {
        expect(xhr.request.body.email).to.equal(email);
        expect(xhr.request.body.password).to.equal(password);
       });
    });

but I get this error:

'Argument type string is not assignable to parameter type keyof Chainable ...   Type string is not assignable to type "and" | "as" | "selectFile" | "blur" | "check" | "children" | "clear" | "clearCookie" | "clearCookies" | "clearLocalStorage" | "click" | ...     Type string is not assignable to type "intercept"'

I've found this question Argument type string is not assignable to parameter type keyof Chainable... in Cypress, but the answers here are only applicable for an index.d.ts file, however I have an index.js file (cypress version 10.3.0 and this is not working for me. Can anyone help me solve this issue?

Answer 1

You shouldn't mix .js and .ts in a Typescript project.

Make everything .ts, then add the index.d.ts with a type definition for your custom command.

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

declare namespace Cypress {
  interface Chainable<Subject = any> {
    login(): Chainable<any>;
  }
}

You may run into more problems, for example check if you have a tsconfig.json in the /cypress folder.

If in doubt, use cypress-realworld-app as a reference for Typescript setup.