我如何使用 TypeScript 为 Cypress 设置自定义命令？

我使用 yarn 启动了一个新项目，并添加了 TypeScript 和 cypress 作为依赖项。我创建了一个带有自定义命令的示例测试。测试位于文件 cypress/e2e/cypress/example.cy.ts 中，其内容如下：

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

该命令位于 cypress/e2e/cypress/support/commands.ts，内容如下：

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

当我在 Cypress 中运行此测试时，测试失败并出现以下错误：“cy.myCommand 不是一个函数”。我该如何正确配置我的测试？

我正在使用 Cypress 13.6.5。

答案＃1

当你将 cypress 和 TypeScript 添加为依赖项时，你并不会自动获得正确的配置。通过结合一些类似的答案，我找到了以下解决方案：

• 将 cypress/e2e/cypress/support/e2e.js 重命名为 cypress/e2e/cypress/support/e2e.ts。该文件只是导入 commands.{js|ts}。

• 将 commands.ts 更新为如下内容：

  declare namespace Cypress {
      interface Chainable<Subject = any> {
          myCommand(): Chainable<any>;
      }
  }
  
  Cypress.Commands.add('myCommand', () => {
      cy.visit('https://example.cypress.io')
  })
  

• 将 cypress.config.js 重命名为 cypress.config.ts（在你项目的根目录下）。

• 将以下行添加到 cypress.config.ts：

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

编辑 2024年5月31日：我还使用 yarn 作为我的包管理器。我必须创建 .yarnrc.yml，内容如下：

nodeLinker: node-modules

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

这会导致 yarn 在 yarn 项目根目录创建目录 node_modules，而不是在其他地方。现在 VSCode 可以在 node_modules 中找到语法检查所需的类型。

我这样做是基于：Typescript 在 node_modules 文件夹中的定义文件中找不到类型