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

[erwinheitzman]

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

[danielhusar]

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

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

[michaeljaltamirano]

@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

[erwindetesters]

That is to get the commands recognised in your tests, however in this case the internal types do not seem correct instead @michaeljaltamirano

[aomader]

This behavior has been adjusted in #17496

Now you have to add correct types for your custom commands to Chainable.

However, I was under the impression that a custom command does not have to return a Chainable, as this is handled by cypress itself correctly. This was also suggested by the previous CanReturnChainable return type of the command function to add.

Is this assumption incorrect? @remcohaszing

If this still holds, the PR is not correct and should be updated.

[erwindetesters]

I see, seems I misunderstood the changes when reading the PR and changelog. I will try again later today and I'm assuming this will then be resolved.

[remcohaszing]

I think this is a bug in #17496. I can fix this.

Just to make sure before I fix it, it should be like this right?

declare global Chainable {
  foo(bar: string): Chainable<string>;
}

Cypress.Commands.add('foo', (bar) => {
  // $ExpectType string
  bar;
  // Returning a string is ok
  return 'ok';
  // Returning a chainable wrapping a string is also ok
  return cy.hash();
});

it('should work', () => {
  // $ExpectType Chainable<string>
  cy.foo('asd');
});

[aomader]

Looking at CanReturnChainable, I would assume this is correct. But a cypress guy might jump in here.

[shazaddad]

Even the example provided fails from https://docs.cypress.io/guides/tooling/typescript-support#Types-for-custom-commands

[mateustalles]

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

[erwindetesters]

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.

[erwindetesters]

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.

[akshayhiremath9731]

Cypress.Commands.add('path', (text: string) => {
cy.xpath("(//span[contains(.,'" + text + "')]/following::td)[1]");
});

interface Chainable {
path(text: string): void;
}

while using
cy.path('paragraphText').clear().

i am getting this error
Property 'clear' does not exist on type 'void'
@remcohaszing

[flotwig]

@bahmutov did you intend to reopen this issue? I thought #18967 fixes this

[flotwig]

Closing since #18967 should have fixed this. Please open a new issue if this is still broken in the latest Cypress.

[LuisValgoi]

Same thing here...

[alexzavg]

same as above comment^^^

[mleblancbpa]

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

[ReddixT]

This still doesn't fix the issue. The datacy command works but it still shows this error.

[lflucasferreira]

Same page here

[ENdonga]

This solved it for me
1 have this structure in the same file as the commands.ts, however, it has to be before any imports

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

declare global {
    namespace Cypress {
        interface Chainable<Subject> {
            login(): void
        }
    }
}

2 create a global.d.ts file that has the the following. Then add the file to tsconfig.json includes property

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