eslint-plugin-testing-library 没有捕获 lint 错误

Question

我正在尝试将eslint-plugin-testing library 添加到项目中，以捕获@testing-library/react 测试中的常见错误。我关注了instruction steps，但我无法让它捕获测试文件中的错误。

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

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

package.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"
    }
  }
}

Answer 1

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

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

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