ArtemSapegin

Ensuring React Testing Library best practices with ESLint

These two ESLint plugins could be useful to improve consistency in how your team is using React Testing Library:

  1. Install the dependencies:
npm install --save-dev eslint-plugin-testing-library eslint-plugin-jest-dom
  1. Update ESLint config, .eslintrc.json:
{
  "extends": [
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ],
  "plugins": ["testing-library", "jest-dom"],
  "rules": {
    "testing-library/no-render-in-setup": "error",
    "testing-library/no-wait-for-empty-callback": "error",
    "testing-library/prefer-explicit-assert": "error",
    "testing-library/prefer-presence-queries": "error",
    "testing-library/prefer-screen-queries": "error",
    "testing-library/prefer-wait-for": "error"
  }
}

All jest-dom rules are enabled in the recommended configuration, and all of them are fixable.

The testing-library recommended configuration doesn’t have many rules, so I’ve enabled a few more, that match our code base. Unfortunately, there aren’t many fixable rules.

Resources