Cypress TypeError：＆＃x27; jQuery＆＃x27;未定义

Question

在 cypress/commands.ts 尝试获取类型 jQuery 中，但它返回 vscode

'JQuery' is not defined.eslint[no-undef](https://eslint.org/docs/rules/no-undef)

i.sstatic.net/dydto.png“ rel =“ nofollow noreferrer ” 代码> jQuery 肯定似乎存在，您可以从上面的屏幕截图中看到，但是也许是因为相同类型的两个定义存在冲突？

command.ts

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

declare global {
  namespace Cypress {
    interface Chainable {
      getElByAttr(attr: string, val: string): Chainable<JQuery<HTMLElement>>;
      getByTestId(testId: string, length?: number): Chainable<void>;
    }
  }
}

Cypress.Commands.add('getByTestId', (testId, length = 1) => {
  cy.get(`[data-testid="${testId}"]`).should('have.length', length);
});

Cypress.Commands.add('getElByAttr', (attr = 'name', val) => {
  return cy.get(`[${attr}=${val}]`);
});

export {};

root tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "incremental": true,
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js", "jest.config.js", "__tests__/**/*.js"]
}

我试图将 tsconfig.json 添加到我的/cypress 文件夹中，但这并不能解决问题，这就是我尝试的。

/cypress/tsonfig.json，

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

我尝试每次更改时都尝试在VSCODE中重新启动我的TS服务器，但是似乎没有解决此问题

，看起来其他人也遇到了这个问题此处

也尝试添加“ type”：[“ Cypress”]

还尝试了以下内容；

• docs中的什么
• “ rel =” nofollow noreferrer“> this
• https://github.com/cypress-io/cypress/issues/1152#issuecomment-355794417 /cypress/eskess/1152＃issuecomment-359837094“ rel =“ nofollow noreferrer”>和this
• 和此

赛普拉斯版本

10.1.0

，真实地亏本。任何帮助将不胜感激。

Answer 1

因此发现解决方案是我的eslint。

我需要将以下内容添加到我的中扩展选项

'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',

。

'@typescript-eslint/no-namespace': ['error', { allowDeclarations: true }],

Answer 2

对我有用的唯一一件事是在使用jQuery的打字稿文件的顶部添加/ *全局jQuery */。

Answer 3

这不是直接的答案，但它有助于避免完全使用“ jQuery”接口，这样您就不会遇到错误。因此，建议是使用 returnType 来推断类型，而不是直接声明它：

declare global {
  namespace Cypress {
    interface Chainable {
      getElByAttr(attr: string, val: string): ReturnType<typeof cy.get>;
      getByTestId(testId: string, length?: number): ReturnType<typeof cy.get>;
    }
  }
}