cypress: Argument of type '() => void' is not assignable to parameter of type '() => Chainable'.

Current behavior

With the upgrade to v9, Cypress is reporting the following error when adding a custom method:

Argument of type '() => void' is not assignable to parameter of type '() => Chainable<any>'.

Desired behavior

According to the documentation, no other code should be needed to make this work.

Thus I believe that void should be a valid type to be supported.

Test code to reproduce

Cypress.Commands.add('login', () => {
  // do something
})

Cypress Version

9.0.0

Other

No response

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 9
  • Comments: 19 (3 by maintainers)

Commits related to this issue

Most upvoted comments

Same thing here…

image

Screen Shot 2022-03-30 at 13 34 57

Hey all, for me the issue was resolved after changing the types as suggested by @michaeljaltamirano and @aomader like so:

// cypress/support/index.d.ts

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

If anyone is still having issues, please create an issue specific to your issue as it seems like this can be closed (which I will sometime this weekend if there are no serious objections) so the devs don’t have to go through the whole ticket to find what information is relevant and what is not.

@erwinheitzman I think you need to add the custom method to Chainable as described in the following documentation: https://github.com/cypress-io/cypress-example-todomvc#custom-commands, e.g.

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

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

See also: https://docs.cypress.io/guides/tooling/typescript-support#Types-for-custom-commands

If anybody else falls here to find out how to get rid of typescript error in declaring commands, you have to wrap your declare namespace Cypress bloc in a declare global { ... } block like so:

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

@remcohaszing Hi I’m a Cypress guy. The point is we shouldn’t be required to return anything from the commands at commands.ts. They don’t return any direct value nor can be assigned to variables. Only yields the same that the Cypress command does

declare namespace Cypress {
    interface Chainable {
      /**
       * Custom command to select DOM element by data-cy attribute with timeout per ms
       * @example cy.dataCy('greeting', { timeout: 50000 })
       */
      dataCy(value: string, timeout?: number): Chainable<Element>
  }
}

Cypress.Commands.add('dataCy', (value, timeout) => {
  cy.get(`[data-cy="${value}"]`, { timeout })
})

/// spec.ts
cy.dataCy('this-element').then($el => $el.show())

Also adding a return before the cy.get command doesn’t solve the issue.

Apparently I cannot close it myself but note to the maintainers, this can be closed.

I think it would make sense for people to be able to close their own tickets, might be something to consider.

I have the same issue, but with callback having arguments:

Cypress.Commands.add('mockApi', ({ user = {} }) => {
  ...
})