使用 React、React 测试库和 Cypress 为 Typescript 项目设置 ESLint

Question

似乎每次我开始使用某种新库时，我都会遇到 ESLint 问题，我永远无法真正弄清楚原因。我跌跌撞撞直到错误和警告消失，然后再处理。我希望我能得到一些关于它应该如何在这里工作的答案。

我有一个使用 Typescript 的 React 项目。我们使用 react-testing-library 进行测试（使用 Jest 类型）以及 Cypress 进行测试（使用 Cypress 类型）。 Jest 和 Cypress 会发生冲突，因为它们使用了许多相同的关键字，但来自不同的库（即 describe、expect、context 等）。

此外，使用 cypress 可以定义您自己的函数，这些函数将扩展用于所有 cypress 测试的全局 cy 对象，但是这也必须输入并要求您编写自己的定义文件。

一切都很顺利，直到我尝试添加自己的类型定义，此时它又开始抱怨了。 （我想指出，我的项目确实按照我目前所做的一切按预期编译和运行。这只是 ESLint 不高兴）。

我试图解决的主要问题是为什么类型定义似乎没有包含在项目中。我收到以下错误：

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: cypress\support\index.d.ts.
The file must be included in at least one of the projects provided.

以及是否有更好的方法来布局。

感谢任何真正花时间阅读并尝试的人。

文件夹结构如下：

cypress
- fixtures
- integrations
- - file.spec.ts <- Uses the custom functions in a test
- plugins
- support
- - commands.ts <- Contains my custom functions
- - index.d.ts  <- Types for custom functions
- - index.ts
- .eslintrc.js (A)
- tsconfig.json (B)
src (contains all the jest tests)
.eslintrc.js (C)
tsconfig.json (D)
tsconfig.eslint.json

.eslintrc.js (A)

module.exports = {
  extends: ['../.eslintrc.js'],
  parserOptions: {
    project: 'cypress/tsconfig.json',
  },
}

tsconfig.json (B)

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": true,
    // be explicit about types included
    // to avoid clashing with Jest types
    "types": ["cypress", "cypress-axe"],
    "allowJs": true
  },
  "include": [".eslintrc.js", "../node_modules/cypress", "./**/*"]
}

.eslintrc.js (C)

module.exports = {
  parser: '@typescript-eslint/parser',
  root: true,
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: './tsconfig.eslint.json',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['react', 'react-hooks', '@typescript-eslint', 'cypress'],
  rules: {
    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
    ...
  },
}

tsconfig.json (D)

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "src",
    "types": ["jest"]
  },
  "include": [
    "build-system",
    "src",
    ".eslintrc.js",
    "pretty.js",
    "gulpfile.js"
  ],
  "exclude": ["node_modules", "src/*.test.ts", "src/*.test.tsx"]
}

tsconfig.eslint.json

{
  // extend your base config so you don't have to redefine your compilerOptions
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "noEmit": true
  },
  "exclude": []
}

Answer 1

不管怎样，我已经解决了这个问题。希望这在某些时候对某人有用。

基本上解决方案是摆脱 index.d.ts 文件，并将类型直接放在 commands.ts 文件中。

在this 线程的帮助下，该线程指出：

大家好，这个问题评论帮助我解决了这个问题： cypress-io/add-ypress-custom-command-in-typescript#2（评论）

Fix 似乎是在全局命名空间中声明 Cypress，而您的 那里的自定义命令定义（从☝️复制）：

declare global {
  namespace Cypress {
    interface Chainable {
      customCommand: typeof customCommand;
    }
  }
}

function customCommand(input: MyCustomClass) {
  // ...
}

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

但同意文档中建议的解决方案不起作用

因此，通过将以下代码添加到我的 commands.ts 文件中：

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      /**
       * Custom command to wait for a specific set of network requests to finish
       * @example cy.waitForData()
       */
      waitForData(): Chainable<Subject>
    }
  }
}

以及将以下规则添加到我的 .eslintrc.js (C) 文件中：

rules: {
  ...    
  '@typescript-eslint/no-namespace': ['off']
}

我能够解决这个问题。

此外，如果相关，isolatedModules 标志将要求您也将export {} 添加到 commands.ts 文件中。