Currently trying to convert a cypress(10) project from js to ts.

My Custom commands don't seem to be working, i get the following error while defining the custom command(the name of the custom command is underlined in red):

Argument of type '"notifMarkAllRead"' is not assignable to parameter of type 'keyof Chainable<any>'.ts(2345)

My Custom command code:

Cypress.Commands.add('notifMarkAllRead', () => {
    cy.get('[data-activates^=\'notificationActionsDropdown\']').click();
    cy.get('[id^=\'notificationActionsDropdown\']').contains('gelesen').click();
})

When using those commands (*.ts file now after renaming from *.js) i also get an error:

Property 'notifMarkAllRead' does not exist on type 'cy & CyEventEmitter'.ts(2339)

What do I need to do to fix this?

Thamks in advance!

Ps: Problem seems to be with the custom command, because i can sill use the custom commands defined in a js file in a ts testfile(*.cy.ts)

Custom command is defined in: NotifModules.ts

Documentation is defined in: NotifModules.d.ts

TestFile is called: Notifications.cy.ts

/cypress/tsconfig.json:

{
"compilerOptions": {
    "lib": [
        "es2015",
        "dom"
    ],
    "downlevelIteration": true,
    "allowJs": true,
    "noEmit": true,
    "types": [
        "cypress",
        "cypress-xpath"
    ],
    "baseUrl": "./modules"
},
"include": [
    "**/*"
]
}

/cypress.config.ts:

import { defineConfig } from "cypress";

let currentNotifications: string[] = [];
let expectedNotifications: string[][] = [];

export default defineConfig({
  chromeWebSecurity: false,
  defaultCommandTimeout: 40000,
  pageLoadTimeout: 200000,
  viewportWidth: 1280,
  viewportHeight: 1024,
  env: {
    warehouseId: "99572a91-9a4d-4790-bb44-46d0ac3254ff",
    identityDomainName: "identity-test",
  },
  retries: {
    runMode: 2,
    openMode: 0,
  },

  reporter: "junit",
  reporterOptions: {
    mochaFile: "results/junit-test-output.xml",
    toConsole: true,
  },
  e2e: {
    baseUrl: "https://bla.bli.de:12345",

    setupNodeEvents(on, config) {
      on("task", {
        resetExpectedNotifications: () => {
          return (expectedNotifications = []);
        },
        resetCurrentNotifications: () => {
          return (currentNotifications = []);
        },
        addExpectedNotifications: ({ newExpectedNotifications, userIndex }) => {
          expectedNotifications[userIndex].push(newExpectedNotifications);
          return null;
        },
        addCurrentNotifications: (newCurrentNotifications) => {
          currentNotifications.push(newCurrentNotifications);
          return null;
        },
        getExpectedNotifications: (userIndex) => {
          return expectedNotifications[userIndex];
        },
        getCurrentNotifications: () => {
          return currentNotifications;
        },
      });
    },
  },
});

CodePudding user response：

Try adding a type definition in cypress/support/index.d.ts

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

declare namespace Cypress {
  interface Chainable<Subject> {
    notifMarkAllRead(): Chainable<any>
  }
}

CodePudding user response：

I have found the solution to my question: I had my *.d.ts files located inside the cypress/support folder, right next to the *.ts files with all the custom commands. Moving those outside(!) the "support"-folder and into another one called "definitionFiles" (for example) worked beautifully!