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

Question

I'm trying to add eslint-plugin-testing library to a project to catch common errors in our @testing-library/react tests. I've followed the instruction steps, yet I cannot get it to catch errors in the test files.

For example, I manually turn on the no-debug rule, add a debug() statement in a .test.tsx file, and run the linter. It does not catch any mistakes in the file.

If I break rules from other plugins, they are caught, so I suspect I may have something wrong in how I added the testing-library plugin to my config.

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

Couple of things I've seen in your setup:

1. you are using "plugin:testing-library/recommended" preset, but the best one for React is "plugin:testing-library/react" as it will enable recommended + react ones. That will enable all the rules with "React" badge under configuration columns
2. after you change this, you can remove both rules you manually added in your eslint config as they are automatically enabled by react preset

I'm not sure what you mean by "If I break rules from other plugins, they are caught". Let me know if enabling react preset fix this for you. If not, it would be nice to have a small repo to reproduce the error.