Cypress Custom Commands: Default values not recognized

Question

Following Cypress guidelines, I managed to register my Cypress custom commands into my IDE through Typescript. The only thing I'm having trouble with is the default values for my commands.

Basically:

I create a command with default values
I register the command in the index.d.ts
I mention the default values in the JSDoc
When using this command, if I don't specify some arguments that have default values, my IDE is unhappy

Snippet example:

// commands.js
Cypress.Commands.add("rsChoose", {
    prevSubject: true
}, (subject, text="", num=1, all=false) => {
    // Open the select
    cy.wrap(subject)
        .click();
    // Display all options
    if (all === true) {
        cy.wrap(subject)
            .find(rsShowMoreButton)
            .click();
    }
    // Alias the option list
    cy.wrap(subject)
        .find(rsOptions)
        .as("options");
    // Filter our options with our text
    if (text.length > 0) {
        cy.get("@options")
            .contains(text)
            .as("options");
    }
    // Choose the first matching option
    cy.get("@options")
        .eq(num - 1)
        .click();
    return cy.wrap(subject)
});

// index.d.ts
declare namespace Cypress {
  interface JQuery<HTMLElement> {
    /**
     * Allows you to select an option from a FieldBox React select based on a given text
     * If no text is given, will simply pick the first option
     * Most select only display a limited amount of options. We can display them using the "all" param
     * @prevSubject subject
     * @param {String} [text=""] - The text our option must contain
     * @param {Number} [num=1] - The option number we want to get (starts at 1)
     * @param {Boolean} [all=false] - Forces the select to display all the available options
     * @returns {Cypress} - The original subject (Cypress-wrapped select wrapper)
     */
    rsChoose(text, num, all): JQuery<HTMLElement>
  }
}

The error in my IDE:

I'm not sure what to change to fix this issue :(

score 2 · Accepted Answer · answered Apr 24 '20 at 11:02

2

You need to tell Typescript that some of parameters are optional:

// index.d.ts
declare namespace Cypress {
  interface JQuery<HTMLElement> {
    rsChoose(text?, num?, all?): JQuery<HTMLElement>
  }
}

Also if you use Typescript I recommend you to add types to your parameters ;)

answered Apr 24 '20 at 11:02

Marek Szkudelski

1,102
4
11

Thanks, that worked! It's my first time using TypeScript, which happens to be the only way to register the custom Cypress Commands into the IDE. I've also added the types into all my TypeScript declaration as you advised, like so: `rsChoose(text?:String, num?:Number, all?:Boolean): JQuery` Thanks! – Jordan Kowal Apr 24 '20 at 11:16
2

I would rather use these type in lower case: string, number... Learn more about the difference: https://stackoverflow.com/questions/14727044/typescript-difference-between-string-and-string – Marek Szkudelski Apr 24 '20 at 11:27
Alright, interesting read. I'll make those changes then! Thanks again – Jordan Kowal Apr 25 '20 at 13:20

Cypress Custom Commands: Default values not recognized

1 Answers1