Cypress搭配Typescript出现get类型错误及JQuery未定义如何解决？

报错原因 #

你遇到的JQuery is not defined报错，是因为Cypress内置的JQuery类型默认挂载在Cypress命名空间下，全局作用域没有直接暴露JQuery类型。

解决方案 #

方案1：复用Cypress内置类型（推荐，无需额外安装依赖） #

直接修改cypress/support/index.ts里的类型声明，给JQuery加上Cypress.前缀即可，修改后的代码如下：

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

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to select DOM element by data-cy attribute.
       * @example cy.dataCy('greeting')
       */
      dataCy(value: string): Chainable<Cypress.JQuery<HTMLElement>>
    }
  } 
}

修改后重启IDE的TypeScript服务即可消除报错。

方案2：全局注册JQuery类型（适合需要全局用JQuery类型的场景） #

如果需要在全局作用域直接使用JQuery类型，可以按以下步骤操作：

1. 安装JQuery类型依赖：

npm install @types/jquery --save-dev

2. 修改cypress/tsconfig.json的types配置，新增jquery项：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "jquery"]
  },
  "include": ["**/*.ts"]
}

额外优化建议 #

可以把自定义命令的类型声明单独放到cypress/support/index.d.ts文件中，和业务实现代码拆分，更便于后续维护。

内容的提问来源于stack exchange，提问作者denislexic