The argument type 'string' does not match the parameter type 'keyof Chainable' in Cypress JavaScript

Question

The argument type 'string' does not match the parameter type 'keyof Chainable' in Cypress JavaScript

Trying to incorporate a unique custom command in Cypress (commands.js file) as follows:

     Cypress.Commands.add("login", (email, password) => {
      cy.intercept('POST', '**/auth').as('login');
      cy.visit('/auth');
      cy.get('[formcontrolname="email"]').type(email);
      cy.get('[formcontrolname="password"]').type(password);
      cy.get('form').submit();
      cy.wait('@login').then(xhr => {
        expect(xhr.request.body.email).to.equal(email);
        expect(xhr.request.body.password).to.equal(password);
       });
    });

An error is encountered with the message:

A relevant question can be found here Argument type string is not assignable to parameter type keyof Chainable... in Cypress, however, the solutions presented apply solely to an index.d.ts file, whereas I am working with an index.js file for cypress version 10.3.0. Any assistance on resolving this issue would be greatly appreciated.

javascript typescript cypress

Answer 1

Answer №1

Avoid mixing .js and .ts files in your Typescript project.

Convert everything to .ts, then include an index.d.ts file with type definitions for any custom commands.

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

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

You might encounter issues, so make sure to have a tsconfig.json file in the /cypress folder.

If uncertain, refer to cypress-realworld-app for guidance on setting up Typescript.

Answer 2

Avoid mixing .js and .ts files in your Typescript project.

Convert everything to .ts, then include an index.d.ts file with type definitions for any custom commands.

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

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

You might encounter issues, so make sure to have a tsconfig.json file in the /cypress folder.

If uncertain, refer to cypress-realworld-app for guidance on setting up Typescript.

Answer 3

Answer №2

The solution provided resolved two Linting-issues for me:

'Subject' is defined but never used. eslint(@typescript-eslint/no-unused-vars)

and

Unexpected any. Specify a different type. (eslint@typescript-eslint/no-explicit-any)

. The fix that worked without triggering any Linting-issues was:

// support/index.d.ts
/// <reference types="cypress" />

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

With this, TypeScript now correctly infers parameter types when defining commands:

https://i.sstatic.net/8EptO.png

However, there is still an issue with proper typing for the return type. For instance, the following code does not produce a TypeScript error even though the return type is incorrect (it should be void as per the declaration):

Cypress.Commands.add("login", (name) => {
  return name;
})

To enforce type-checking for the return type as well, you can do the following:

// declare the function explicitly
const login: Cypress.Chainable["login"] = (name) => {
  // will trigger an error now
  // return name;
  return;
};

Cypress.Commands.add("login", login);

Answer 4

The solution provided resolved two Linting-issues for me:

'Subject' is defined but never used. eslint(@typescript-eslint/no-unused-vars)

and

Unexpected any. Specify a different type. (eslint@typescript-eslint/no-explicit-any)

. The fix that worked without triggering any Linting-issues was:

// support/index.d.ts
/// <reference types="cypress" />

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

With this, TypeScript now correctly infers parameter types when defining commands:

https://i.sstatic.net/8EptO.png

However, there is still an issue with proper typing for the return type. For instance, the following code does not produce a TypeScript error even though the return type is incorrect (it should be void as per the declaration):

Cypress.Commands.add("login", (name) => {
  return name;
})

To enforce type-checking for the return type as well, you can do the following:

// declare the function explicitly
const login: Cypress.Chainable["login"] = (name) => {
  // will trigger an error now
  // return name;
  return;
};

Cypress.Commands.add("login", login);

The argument type 'string' does not match the parameter type 'keyof Chainable' in Cypress JavaScript

Answer №1

Answer №2

Similar questions

typescriptCreating a custom useFetch hook with TypeScript and Axios

React Native's fetch function appears to be non-responsive

AngularJS input range is written inside the bubble that crosses over the screen

AngularJS redirection to a different state by utilizing a URL

Unable to scroll to the top of the page with JavaScript

Ways to resolve the issue: ""@angular/fire"' does not contain the exported member 'AngularFireModule'.ts(2305) in an ionic, firebase, and

Enhance the appearance of rows in a table by adding a captivating marquee effect to those with

Utilize React-Charts.js-2 with ChartJS to create a customized bar chart

Utilize CSS to format the output of a script embedded within

Utilizing data from the home component in another component: A guide

Is there a specific index range in javascript or nodejs for accessing array items?

Updating HTML content based on an active user session using Node.js/Express - A Step-by-Step Guide

Capturing Data from Tables and Saving it with Protractor

Tips on keeping Bootstrap Modals out of your browsing history

When incorporating a JS React component in TypeScript, an error may occur stating that the JSX element type 'MyComponent' is not a valid constructor function for JSX elements

Is there a way to cancel hiding on a q-dialog?

What action is triggered on an Apple iPhone when a notification is tapped?

What could be causing my Vue component to not refresh?

A comprehensive guide on using HttpClient in Angular

Sending Multiple Sets of Data with Jquery Ajax.Post: A Step-by-Step Guide