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

我在你的设置中看到了一些东西：

您正在使用 "plugin:testing-library/recommended" 预设，但 React 最好的预设是 "plugin:testing-library/react"，因为它将启用推荐的 + React 预设。这将在配置列
更改此设置后，您可以删除手动添加到 eslint 配置中的两个规则，因为它们会被 React 预设自动启用

我不确定 "If I break rules from other plugins, they are caught" 是什么意思。让我知道启用反应预设是否为您解决了这个问题。如果没有，最好有一个小的 repo 来重现错误。

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

eslint-plugin-testing-library is not catching lint errors

eslint

eslintrc

testing-library