1

我正在尝试添加eslint-plugin-testing library到一个项目中以捕获我们@testing-library/react测试中的常见错误。我已按照说明步骤操作，但我无法让它捕获测试文件中的错误。

例如，我手动打开no-debug规则，debug()在 .test.tsx 文件中添加一条语句，然后运行 ​​linter。它不会捕获文件中的任何错误。

如果我违反其他插件的规则，它们就会被捕获，所以我怀疑我将 testing-library 插件添加到我的配置中的方式可能有问题。

包.json

{
  "dependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0"
  },
  "devDependencies": {
    "@babel/core": "7.7.0",
    "@babel/preset-react": "7.0.0",
    "@babel/preset-typescript": "7.1.0",
    "@testing-library/react": "9.1.3",
    "@typescript-eslint/eslint-plugin": "2.15.0",
    "@typescript-eslint/parser": "2.15.0",
    "eslint": "6.8.0",
    "eslint-plugin-cypress": "2.10.3",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.19.0",
    "eslint-plugin-react-hooks": "2.3.0",
    "eslint-plugin-testing-library": "3.0.0",
    "typescript": "3.7.3"
  }
}

.eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  "env": {
    "browser": true,
    "es6": true,
    "jasmine": true,
    "jest": true,
    "jquery": true,
    "node": true
  },
  "plugins": [
    "@typescript-eslint",
    "jsx-a11y",
    "react-hooks",
    "react",
    "testing-library"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:react/recommended",
    "plugin:testing-library/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars-experimental": "off",
    "no-unused-vars": "off",
    "react-hooks/exhaustive-deps": "warn",
    "react-hooks/rules-of-hooks": "error",
    "react/display-name": "off",
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react/prop-types": "off",
    "testing-library/no-await-sync-query": "error",
    "testing-library/no-debug": "error"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
4

1 回答 1

3

我在您的设置中看到了几件事：

  1. 您正在使用“plugin:testing-library/recommended”预设，但 React 最好的预设是“plugin:testing-library/react”，因为它将启用推荐 + react 的。这将启用配置列下带有“React”标志的所有规则
  2. 更改此设置后，您可以删除您在 eslint 配置中手动添加的两个规则，因为它们是由 react 预设自动启用的

我不确定您所说的“如果我违反其他插件的规则，它们就会被抓住”。让我知道启用反应预设是否可以为您解决此问题。如果没有，最好有一个小的 repo 来重现错误。

于 2020-05-17T10:44:39.670 回答