Using Cypress.Promise in a Cypress command causes type conflicts

Question

Using Cypress.Promise in a Cypress command causes type conflicts

When using Cypress 8.x.x, the following Cypress command works fine:

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

Cypress.Commands.add('login', () => {
  return new Cypress.Promise((resolve, reject) => {
    // rest
  });
});

However, upon updating to Cypress 9.x.x, I encounter this TypeScript error:

argument of type '() => Bluebird<unknown>' is not assignable to parameter of type '(person?: Partial<Person>) => Chainable<Token>'.
  Type 'Bluebird<unknown>' is missing the following properties from type 'Chainable<Token>': and, as, blur, check, and 83 more.ts(2345)

typescript cypress

Answer 1

Answer №1

The issue lies in the discrepancy between the implementation and the expected typing: the actual return value (new Cypress.Promise(…)) is a promise, or more specifically a PromiseLike, rather than a Token¹.

Given that Cypress utilizes Bluebird promises, to align with the implementation, the return type of login() should also be a Bluebird promise; you can achieve this by importing the symbol from the Cypress package as follows:

import type Bluebird from "cypress/types/bluebird";

declare global {
    namespace Cypress {
        interface Chainable {
            login(): Bluebird<Token>;
        }
    }
}

Give it a try².

^{1 – Just an FYI, the OP doesn't specify what Token represents, so technically it could be a PromiseLike. However, I find this scenario to be unlikely. Unfortunately, user @PeaceAndQuiet's related question was left unanswered, leading me to assume that Token isn't a PromiseLike (probably an access token).}

^{2 – Keep in mind that cypress may not be recognized by the playground for some reason; even though it is npm-installed (navigate to Plugins → scroll down)}

Answer 2

The issue lies in the discrepancy between the implementation and the expected typing: the actual return value (new Cypress.Promise(…)) is a promise, or more specifically a PromiseLike, rather than a Token¹.

Given that Cypress utilizes Bluebird promises, to align with the implementation, the return type of login() should also be a Bluebird promise; you can achieve this by importing the symbol from the Cypress package as follows:

import type Bluebird from "cypress/types/bluebird";

declare global {
    namespace Cypress {
        interface Chainable {
            login(): Bluebird<Token>;
        }
    }
}

Give it a try².

^{1 – Just an FYI, the OP doesn't specify what Token represents, so technically it could be a PromiseLike. However, I find this scenario to be unlikely. Unfortunately, user @PeaceAndQuiet's related question was left unanswered, leading me to assume that Token isn't a PromiseLike (probably an access token).}

^{2 – Keep in mind that cypress may not be recognized by the playground for some reason; even though it is npm-installed (navigate to Plugins → scroll down)}

Answer 3

Answer №2

Version 9.0.0 introduced some significant changes that you should be aware of. For more details, check out the changelog for version 9.0.0. One particular change to pay attention to is the 6th one listed in the changelog, which relates to feature 17496.

To avoid any issues, make sure to replace <Token> with something that supports Bluebird promises. Alternatively, you can set it to <any>.

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

Answer 4

Version 9.0.0 introduced some significant changes that you should be aware of. For more details, check out the changelog for version 9.0.0. One particular change to pay attention to is the 6th one listed in the changelog, which relates to feature 17496.

To avoid any issues, make sure to replace <Token> with something that supports Bluebird promises. Alternatively, you can set it to <any>.

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

Answer 5

Answer №3

The issue with TypeScript was caused by a major change in version 9.0.0. To learn more about this update, visit the changelog:

One significant change is that custom command implementations are now typed according to the declared custom chainables. This addresses #17496.

This means that the return value in your implementation must align with the declared typings/custom chainables.

In your scenario, you are returning a Bluebird promise:

return new Cypress.Promise((resolve, reject) => { ... });

To resolve this, you need to update your typing interface to match the type. This can be achieved through:

declare global {
  namespace Cypress {
    interface Chainable {
      login(): Cypress.Promise<Token>;
    }
  }
}

Alternatively, following @Dima Parzhitsky's recommendation, you can do the following:

import type Bluebird from 'cypress/types/bluebird';

declare global {
  namespace Cypress {
    interface Chainable {
      login(): Bluebird<Token>;
    }
  }
}

Answer 6

The issue with TypeScript was caused by a major change in version 9.0.0. To learn more about this update, visit the changelog:

One significant change is that custom command implementations are now typed according to the declared custom chainables. This addresses #17496.

This means that the return value in your implementation must align with the declared typings/custom chainables.

In your scenario, you are returning a Bluebird promise:

return new Cypress.Promise((resolve, reject) => { ... });

To resolve this, you need to update your typing interface to match the type. This can be achieved through:

declare global {
  namespace Cypress {
    interface Chainable {
      login(): Cypress.Promise<Token>;
    }
  }
}

Alternatively, following @Dima Parzhitsky's recommendation, you can do the following:

import type Bluebird from 'cypress/types/bluebird';

declare global {
  namespace Cypress {
    interface Chainable {
      login(): Bluebird<Token>;
    }
  }
}

Using Cypress.Promise in a Cypress command causes type conflicts

Answer №1

Answer №2

Answer №3

Similar questions

Creating an NPM package that utilizes global types without altering the project it is integrated with

Identifying the specific type within a union of types using a discriminator

IntersectionObserver activates prior to element's entrance into the viewport

Guidelines for simulating ActivatedRouteSnapshot in observable testing situations

Learn the art of generating multiple dynamic functions with return values and executing them concurrently

What is the process for deploying a Lambda function using Terraform that has been generated with CDKTF

The feature of declaration merging does not function properly with the express 4.17.* request type

Combining and Filtering Arrays of Objects with Angular

Set certain properties within the nested object to be optional

Validity of Vue 3 Typescript properties checked during compilation and runtime

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

How can I apply unique "compilerOptions" settings to a specific file in tsconfig.json file?

The ultimate guide to loading multiple YAML files simultaneously in JavaScript

Having trouble halting the execution at specific checkpoints within an asp.net core project containing an angular 8.0 application located in a subfolder named ClientApp

Switch up row values in an array and transform them into an object using SheetJS

Updates made in the type declaration files are not being displayed

Guide on extracting just the key and its value from a Filter expression in a DynamoDB Query using Typescript

Issue with the recursive function in javascript for object modification

Methods for defining a variable in React with Typescript without encountering the "Index signature is missing in type" issue

The onChange event does not work as expected for Select controls