CODEWITHSUNDEEP
typescriptcypresse2e-testing
JuleZ
JuleZ

Reputation: 276

Cypress with typescript custom commands type error

I've setup custom commands for my Cypress tests :

// cypress/support/commands.ts
/// <reference types="cypress"/>

Cypress.Commands.add('getByTestId', (target: [string], timeout: number = 0) => {
    target[0] = `[data-testid="${target[0]}"]`;
    return cy.get(target.join('>'), { timeout });
});



// cypress/support/index.ts
/// <reference types="cypress" />
declare global {
namespace Cypress {
    interface Chainable {
        getByTestId(id: string): Chainable<Element>;
    }
  }
}

these are my files where I setup my commands.

When writing test I have this error even if I had this on the top of my file /// <reference types="cypress" /> :

cypress/integration/filename.test.e2e.ts

sample.test.e2e.ts

Upvotes: 5

Views: 3994

Answers (2)

Sebastiano Schwarz
Sebastiano Schwarz

Reputation: 1146

I also have Cypress TypeScript support and ran into some issues at the beginning. The following setup worked for me:

// cypress/plugins/index.ts
/// <reference types="cypress" />

// cypress/support/commands.ts
declare namespace Cypress {
  interface Chainable<Subject> {
    getByTestId(selector: string, ...options: any): Chainable<JQuery<HTMLElement>>;
  }
}

// cypress/support/commands.ts
Cypress.Commands.add('getByTestId', (selector, ...options) => {
  return cy.get(`[data-test=${selector}]`, ...options);
});

So I have the type reference in the plugins/index.ts file and the namespace declaration as well as custom command definitions in support/commands.ts. I am using the currently newest Cypress version 9.3.1.

Additionally, another thing I've also noticed is when you try to import stuff into commands.ts, you will also get the error you described.

Upvotes: 3

JuleZ
JuleZ

Reputation: 276

This worked for me :

// tsconfig.json

"include": [
    "cypress/support/*.ts"
]

Upvotes: 1

Related Questions