[英]Setting up ESLint for a Typescript Project using React, React Testing Library, and Cypress
似乎每次我开始使用某种新的库时,我都会遇到 ESLint 的问题,而且我永远无法真正弄清楚原因。 我跌跌撞撞直到错误和警告 go 消失,然后再处理。 我希望我能得到一些关于它应该如何在这里工作的答案。
我有一个使用 Typescript 的 React 项目。 我们使用 react-testing-library 进行测试(使用 Jest 类型)以及 Cypress 进行测试(使用 Cypress 类型)。 Jest 和 Cypress 会发生冲突,因为它们使用许多相同的关键字但来自不同的库(即describe
、 expect
、 context
等)。
此外,使用 cypress 可以定义您自己的函数,这将扩展用于所有 cypress 测试的全局cy
object,但是这也必须输入,并且需要您编写自己的定义文件。
一切都很顺利,直到我尝试添加自己的类型定义,此时它又开始抱怨了。 (我想指出,我的项目确实按照我目前正在做的所有事情编译和运行。这只是 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": []
}
对于它的价值,我已经解决了这个问题。 希望这在某些时候对某人有用。
本质上,解决方案是摆脱 index.d.ts 文件,并将类型直接放在 commands.ts 文件中。
在这个线程的一点帮助下,它指出:
大家好,这个问题评论帮助我解决了这个问题:cypress-io/add-ypress-custom-command-in-typescript#2(评论)
修复似乎是在全局命名空间中声明赛普拉斯,并且在那里你的自定义命令定义(从☝️复制):
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>
}
}
}
以及将以下规则添加到 my.eslintrc.js (C) 文件中:
rules: {
...
'@typescript-eslint/no-namespace': ['off']
}
我能够解决这个问题。
此外,如果相关,isolatedModules 标志将要求您也将export {}
添加到 commands.ts 文件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.