How can I set up custom commands for Cypress with TypeScript?

Question

I started a new project with yarn and added TypeScript and cypress as dependencies. I created an example test with a custom command. The test is in file cypress/e2e/cypress/example.cy.ts and reads:

describe('Example', () => {
        it('example', () => {
                cy.myCommand();
        })
})

The command is in cypress/e2e/cypress/support/commands.ts and reads:

Cypress.Commands.add('myCommand', () => {
        cy.visit('https://example.cypress.io')
})

When I run this in Cypress, my test fails with the following error: "cy.myCommand is not a function". How can I configure my tests correctly?

I am using Cypress 13.6.5.

Does this answer your question? How to make custom cypress commands work with typescript — agoff
– agoff, Commented Feb 26, 2024 at 18:31
Thanks for this suggestion, @agoff. The answer was helpful, but it was not exactly what I wanted. I did not like to introduce index.ts because that file was not generated by Cypress like e2e.ts. Furthermore I did not know where to put index.ts. — Martijn Dirkse
– Martijn Dirkse, Commented Feb 27, 2024 at 10:54
I have upvoted the question you are referring to and the answer it currently has. — Martijn Dirkse
– Martijn Dirkse, Commented Feb 27, 2024 at 11:03

Martijn Dirkse · Accepted Answer · 2024-05-31 18:04:24Z

2

When you add cypress and TypeScript as dependencies, you do not automatically have a correct configuration. By combining some similar answers, I found the following solution:

Rename cypress/e2e/cypress/support/e2e.js to cypress/e2e/cypress/support/e2e.ts. This file just imports commands.{js|ts}.

Update commands.ts to be as follows:

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

Cypress.Commands.add('myCommand', () => {
    cy.visit('https://example.cypress.io')
})

Rename cypress.config.js to cypress.config.ts (in the root directory of your project).

Add the following line to cypress.config.ts:

supportFile: 'cypress/e2e/cypress/support/e2e.ts'

EDIT May 31 2024: I was also using yarn as my package manager. I had to create .yarnrc.yml with the following contents:

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-4.1.1.cjs

This causes yarn to create directory node_modules at the yarn project root instead of somewhere else. Now VSCode find types in node_modules needed for syntax checking.

I did so based on: Typescript cannot find type in definition file in node_modules folder

edited May 31, 2024 at 18:04

answered Feb 26, 2024 at 18:30

Martijn Dirkse

75111 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user21484309 Over a year ago

Maybe it would strictly be Chainable<undefined> since that particular command has no return value and Cypress defaults to undefined when you don't make an explicit return, but Chainable<any> is a good catch-all.

Collectives™ on Stack Overflow

How can I set up custom commands for Cypress with TypeScript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related