Cypress custom commands not recognized

Question

I want to create a custom login command. I've added the command to my commands.js file, and also have the import command added to index.js.

When I create a new test file under my integration folder, I try to reference my new command with cy.loginWith(), but it is not recognizing it as a command.

If I add import ../../../support/commands to the top of my new login spec file, the cy.loginWith() custom command is recognized and invoked correctly.
However I know this is not a good thing to do.

This is my custom command in my commands.js file:

Cypress.Commands.add('loginWith' , (email, password) => {
    cy.get('[name="username"]').type(email)
    cy.get('[name="password"]').type(password)
    cy.get('[name="Login"]').click()
})

This is my index.js file:

import "./commands.js"

This is my list.js spec file that sits under /cypress/integration/clients/client list/lists:

/// <reference types="Cypress" />

import "../../../support/commands"

// login to the app
it('A User logs in and sees a welcome message', () => {
    cy.visit('.../login.cfm')
    cy.loginWith('username', 'password')
    expect(cy.contains('Welcome back!'))

   }
)

Is there something I may have misconfigured that is not recognizing the index.js file?

Answer 1

My issue was that intellisense worked fine and everything ran perfectly after doing:

import '../support/commands';

My fix was very simple... just add supportFile to your cypress.json:

{
  "supportFile": "cypress/support/index.ts",
  "baseUrl": "http://localhost:3000"
}

// index.ts
import './commands'

Answer 2

None of the above worked for me, but this worked:

    declare global {
  namespace Cypress {
    interface Chainable {
      customCommand: typeof customCommand;
    }
  }
}

function customCommand(input: MyCustomClass) {
  // ...
}

Cypress.Commands.add('customCommand', customCommand);

got the answer here: https://github.com/cypress-io/cypress-documentation/issues/2565