Skip to content
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