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:
- Install the dependencies:
npm install --save-dev eslint-plugin-testing-library eslint-plugin-jest-dom
- 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.