Cypress terminal error: Property does not exist on type 'cy & CyEventEmitter

Tech stack: Angular v15 and Cypress V12

My component and e2e tests seem to run fine but I get these weird terminal errors when running the tests.

It could be an issue with my Cypress configuration for my shared commands.

This is my shared commands:

declare global {
  namespace Cypress {
    interface Chainable {
      loginAs(role?: string): Chainable<any>,
      isWelcomePage(): Chainable<any>,
      openMenu(): Chainable<any>,
    }
  }
}

Cypress.Commands.add('loginAs', (role?: string) => {
  const user = Cypress.env('user');
  cy.visit(Cypress.env('local'));
  cy.get('#mat-input-0', { timeout: 30000 }).should('be.visible').type(user.email);
  cy.get('#mat-input-1', { timeout: 30000 }).should('be.visible').type(user.password);
  cy.get('.btn').click({ force: true });
});

This is my cypress configuration:

import { defineConfig } from "cypress";
const { verifyDownloadTasks } = require('cy-verify-downloads');

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', verifyDownloadTasks)
    },
    specPattern: "cypress/e2e/**/*.cy.ts",
  },
  chromeWebSecurity: false,
  screenshotsFolder: "cypress/snapshots",
  trashAssetsBeforeRuns: true,
  viewportWidth: 1400,
  viewportHeight: 1200,
  video: false,
  defaultCommandTimeout: 10000,
  env: {
    local: "http://localhost:4200/",
    staging: "hidden",
    backend: "hidden",
    user: {
      email: "hidden",
      password: "hidden",
    },
  },
  component: {
    devServer: {
      framework: "angular",
      bundler: "webpack",
    },
    specPattern: "**/*.cy.ts",
  },
});

This is the terminal errors:

Exact error messages

• Property 'loginAs' does not exist on type 'cy & CyEventEmitter'.

Current Attempt:

Tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "allowJs": true,
    "lib": [
      "es2020",
      "dom"
    ],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "types": ["cypress", "cy-verify-downloads"],
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
  },
  "include": [
    "./src",
    "./cypress/support/index.d.ts"
  ]
}

index.d.ts file:

/// <reference types="cypress" />
export { }

declare global {
  namespace Cypress {
    interface Chainable {
      loginAs(role?: string): Chainable<any>,
      isWelcomePage(): Chainable<any>,
      openMenu(): Chainable<any>,
    }
  }
}

I got the same terminal errors when I run the component tests.

There's probably a few ways to tackle it, here's one

• put the custom command types in cypress/support/index.d.ts

• add a reference to base cypress types

• make the .d.ts a module with a dummy export

/// <reference types="cypress" />
export {}

declare global {
  namespace Cypress {
    interface Chainable {
      loginAs(role?: string): Chainable<any>,
      isWelcomePage(): Chainable<any>,
      openMenu(): Chainable<any>,
    }
  }
}

In tsconfig.json add your index.d.ts

{
  ...
  "include": [ "./src/app", "./cypress/support/index.d.ts"],
}