Cypress Custom TypeScript Command is not a Function

Question

I am implementing a custom Cypress command in TypeScript:

// support/commands.ts
const login = () => {
    console.log('Logging in...');
};

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

declare namespace Cypress {
    interface Chainable {
        login: typeof login;
    }
}

I try to call it using:

describe('Login Scenario', () => {
    it('should allow a user to login', () => {
        cy.visit('/');
        cy.login();
    });
});

Yet, it seems the command is not set up:

TypeError: cy.login is not a function

If I write the command in pure JavaScript (removing the namespace declaration and updating the call to (cy as any).login();, it works.

What am I missing?

Is your support/commands.js included in your support/index.js? — Joshua Wade
– Joshua Wade, Commented Aug 6, 2018 at 14:05

Audwin Oyong · Accepted Answer · 2021-12-13 23:20:21Z

17

I fixed it by adding index.d.ts file in my commands folder. In this file I added something like this:

import { MyCustomType } from '../Types';

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

If you don't import or export anything, just omit global namespace declaration:

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

Keep in mind that it won't work with Typesciprt < 2.3, because default generics type has to be supported.

edited Dec 13, 2021 at 23:20

Audwin Oyong

2,5273 gold badges21 silver badges37 bronze badges

answered Aug 6, 2018 at 16:35

Krzysztof Grzybek

9,6262 gold badges34 silver badges36 bronze badges

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

5 Comments

Eric Burel Over a year ago

Is there any additional step to follow? Maybe you could give insights about your tsconfig?

Krzysztof Grzybek Over a year ago

It should work right away. Currently, I don't work with Cypress so I can't share my tsconfig. Are you sure that your file is named with .d.ts suffix?

Jonathan Tuzman Over a year ago

This only works for me if the index.d.ts file is in the same folder as the spec.

Rafael Lebre Over a year ago

Do you know why we need declare global when we are importing something? I'm importing cypress-wait-until

Krzysztof Grzybek Over a year ago

If you don't have any import/export, a file is considered to be in the global namespace Take a look here: github.com/microsoft/TypeScript/issues/38592#issue-619054264, or here, point 7 techatbloomberg.com/blog/…

Dimitri Lavrenük · Accepted Answer · 2020-08-24 11:37:53Z

9

I had the same issue and all solutions I found did not work for me. Having done everything from the official Cypress documentation and other solutions here I still got the error cy.login is not a function.

The problem was that I renamed every .js file to .ts and cypress/support/index.ts was not loaded any more, because per default Cypress only loads the JavaScript one. To fix it, you need to change it to .ts in cypress.json like that (the same with plugins file):

{
  "supportFile": "cypress/support/index.ts",
  "pluginsFile": "cypress/plugins/index.ts"
}

You can also add the part with declare namespace Cypress {... to commands.ts instead of creating an index.d.ts file, to have the declaration and implementation in the same file

answered Aug 24, 2020 at 11:37

Dimitri Lavrenük

4,9091 gold badge19 silver badges22 bronze badges

2 Comments

Colin Over a year ago

Did you also have to change anything in your tsconfig file? I've tried setting the supportFile and pluginsFile paths to the .ts file, but I get the Cypress error: "Your pluginsFile is set to /tests/e2e/plugins/index.ts, but either the file is missing, it contains a syntax error, or threw an error when required. The pluginsFile must be a .js or .coffee file."

Dimitri Lavrenük Over a year ago

My cypress/tsconfig.json looks like that:

{   "compilerOptions": {     "strict": true,     "baseUrl": "../node_modules",     "target": "es6",     "module": "commonjs",     "lib": ["es5", "dom"],     "types": ["cypress"],     "esModuleInterop": true,     "allowSyntheticDefaultImports": true   },   "include": ["**/*.ts"] }

. PS: comments do not allow proper block formatting

Audwin Oyong · Accepted Answer · 2021-12-13 23:21:42Z

7

Here is what I use and I do not have to add

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

at the top of every file.

I have my custom typings under <projectroot>/cypress/support/index.d.ts

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

declare namespace Cypress {
  interface Chainable<Subject> {
    getByDataTest(tag: string): Chainable<any>
  }
}

And my <projectroot>/cypress/tsconfig.json looks like

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "typeRoots": ["./support"]
  },
  "include": ["**/*.ts"]
}

And TypeScript is finally happy

describe('when I want to select by data test tag', () => {
  it('should select by data test tag', () => {
    cy.getByDataTest('yolo').should('exist')
  });
});

edited Dec 13, 2021 at 23:21

Audwin Oyong

2,5273 gold badges21 silver badges37 bronze badges

answered Jul 9, 2019 at 17:17

GentryRiggen

85813 silver badges10 bronze badges

5 Comments

RajKon Over a year ago

May I know where do you write the implementation of the method getByDataTest ?

GentryRiggen Over a year ago

@RajKon const getDataTag = (tag: string, value: any) => [data-${tag}="${value}"]; const getDataTestTag = (value: any) => getDataTag('test', value); Cypress.Commands.add('getByDataTest', tag => cy.get(getDataTestTag(tag)));

Uzi Over a year ago

you can use either types or typeRoots, not both. see typescriptlang.org/docs/handbook/…

Darksymphony Over a year ago

And what if I use only js files, not typescript with cypress? Then namespace declarations can;t be used

Ε Г И І И О Over a year ago

You might wanna restart VS, just in case if you still see the red squiggles from your linter.

Khuram Niaz · Accepted Answer · 2022-07-06 03:00:25Z

4

Custom commands might not get imported, In cypress version 10 using angular/typescript schematic, there is a e2e.ts rather than index in support folder that imports the commands, if not then it needs the index.ts file with below import command, also it needs to be added to cypress config as supportFile:

// cypress/support/e2e.ts 

// When a command from ./commands is ready to use, import with `import './commands'` syntax

   import './commands';

It might already be commented in the file as well

edited Jul 6, 2022 at 3:00

answered Jul 6, 2022 at 2:30

Khuram Niaz

92911 silver badges17 bronze badges

1 Comment

Kayote Over a year ago

All the other answers are mostly obsolete. This worked for me.

Dan Moulton · Accepted Answer · 2024-01-19 21:58:18Z

0

I was having the same issue in my project which is using NX. I installed Cypress for testing my Angular app, and it generated the following files:

frontend/
├─ cypress/
│  ├─ e2e/
│  ├─ fixtures/
│  ├─ support/
│  │  ├─ app.po.ts
│  │  ├─ commands.js
│  │  ├─ commands.ts
│  │  ├─ component-index.html
│  │  ├─ component.js
│  │  ├─ e2e.ts

Inside component.js there was an import './commands' line which was importing the commands.js file by default instead of commands.ts which is where I declared my custom command. I removed commands.js and it worked. I hope this helps somebody.

answered Jan 19, 2024 at 21:58

Dan Moulton

611 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

Cypress Custom TypeScript Command is not a Function

5 Answers 5

5 Comments

2 Comments

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related