Cypress 自定义 TypeScript 命令不是函数

Question

我正在 TypeScript 中实现自定义 Cypress 命令：

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

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

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

我尝试使用：

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

但是，命令似乎没有设置：

TypeError: cy.login is not a function

如果我用纯 JavaScript 编写命令（删除命名空间声明并将调用更新为 (cy as any).login();，它可以工作。

我错过了什么？

Answer 1

我通过在我的命令文件夹中添加 index.d.ts 文件来修复它。在这个文件中，我添加了这样的内容：

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

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

如果您不导入或导出任何内容，只需省略全局命名空间声明：

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

请记住，它不适用于 Typesciprt

Answer 2

这是我使用的，我不必添加

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

在每个文件的顶部。

我在<projectroot>/cypress/support/index.d.ts 下有我的自定义类型

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

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

我的<projectroot>/cypress/tsconfig.json 看起来像

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

TypeScript 终于开心了

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

Answer 3

我遇到了同样的问题，我找到的所有解决方案都不适合我。在这里完成了赛普拉斯官方文档和其他解决方案中的所有内容后，我仍然收到错误 cy.login is not a function。

问题是我将每个 .js 文件重命名为 .ts 并且 cypress/support/index.ts 不再加载，因为默认情况下赛普拉斯只加载 JavaScript 文件。要修复它，您需要像这样在cypress.json 中将其更改为.ts（与插件文件相同）：

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

您也可以将带有declare namespace Cypress {... 的部分添加到commands.ts，而不是创建index.d.ts 文件，以使声明和实现在同一个文件中