eslint-plugin-testing-library 未捕获 lint 错误

Question

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

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

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

包.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”徽章的所有规则
2. 更改此设置后，您可以删除在 eslint 配置中手动添加的两条规则，因为它们是由反应预设自动启用的

我不确定你所说的“如果我违反其他插件的规则，它们就会被抓住”是什么意思。如果启用反应预设可以解决此问题，请告诉我。如果没有，最好有一个小的存储库来重现该错误。