eslint-plugin-testing-library

ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-testing-library:

$ npm install eslint-plugin-testing-library --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-testing-library globally.

Usage

Add testing-library to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["testing-library"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "testing-library/await-async-query": "error",
    "testing-library/no-await-sync-query": "error",
    "testing-library/no-debug": "warn"
  }
}

Shareable configurations

This plugin exports several recommended configurations that enforce good practices for specific Testing Library packages. You can find more info about enabled rules in the Supported Rules section within the Configurations column.

DOM Testing Library

Enforces recommended rules for DOM Testing Library.

To enable this configuration use the extends property in your .eslintrc config file:

{
  "extends": ["plugin:testing-library/dom"]
}

Angular

Enforces recommended rules for Angular Testing Library.

To enable this configuration use the extends property in your .eslintrc config file:

{
  "extends": ["plugin:testing-library/angular"]
}

React

Enforces recommended rules for React Testing Library.

To enable this configuration use the extends property in your .eslintrc config file:

{
  "extends": ["plugin:testing-library/react"]
}

Vue

Enforces recommended rules for Vue Testing Library.

To enable this configuration use the extends property in your .eslintrc config file:

{
  "extends": ["plugin:testing-library/vue"]
}

Supported Rules

Rule	Description	Configurations	Fixable
await-async-query	Enforce promises from async queries to be handled
await-async-utils	Enforce async utils to be awaited properly
await-fire-event	Enforce promises from fire event methods to be handled
consistent-data-testid	Ensure `data-testid` values match a provided regex.
no-await-sync-events	Disallow unnecessary `await` for sync events
no-await-sync-query	Disallow unnecessary `await` for sync queries
no-container	Disallow the use of `container` methods
no-debug	Disallow the use of `debug`
no-dom-import	Disallow importing from DOM Testing Library
no-manual-cleanup	Disallow the use of `cleanup`
no-multiple-assertions-wait-for	Disallow the use of multiple expect inside `waitFor`
no-node-access	Disallow direct Node access
no-promise-in-fire-event	Disallow the use of promises passed to a `fireEvent` method
no-render-in-setup	Disallow the use of `render` in setup functions
no-side-effects-wait-for	Disallow the use of side effects inside `waitFor`
no-wait-for-empty-callback	Disallow empty callbacks for `waitFor` and `waitForElementToBeRemoved`
no-wait-for-snapshot	Ensures no snapshot is generated inside of a `waitFor` call
no-wait-for-snapshot	Ensures no snapshot is generated inside of a `waitFor` call
prefer-explicit-assert	Suggest using explicit assertions rather than just `getBy*` queries
prefer-find-by	Suggest using `findBy*` methods instead of the `waitFor` + `getBy` queries
prefer-presence-queries	Enforce specific queries when checking element is present or not
prefer-user-event	Suggest using `userEvent` library instead of `fireEvent` for simulating user interaction
prefer-screen-queries	Suggest using screen while using queries
prefer-wait-for	Use `waitFor` instead of deprecated wait methods
render-result-naming-convention	Enforce a valid naming for return value from `render`

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Mario Beltrán Alarcón} 💻 📖 👀 ⚠️ 🚇 🐛	_{Thomas Lombart} 💻 📖 👀 ⚠️ 🚇	_{Ben Monro} 💻 📖 ⚠️	_{Nicola Molinari} 💻 ⚠️ 📖 👀	_{Aarón García Hervás} 📖	_{Matej Šnuderl} 🤔 📖	_{Adrià Fontcuberta} 💻 ⚠️
_{Jon Aldinger} 📖	_{Thomas Knickman} 💻 📖 ⚠️	_{Kevin Sullivan} 📖	_{Jakub Jastrzębski} 💻 📖 ⚠️	_{Nikolay Stoynov} 📖	_marudor 💻 ⚠️	_{Tim Deschryver} 💻 📖 🤔 👀 ⚠️ 🐛 🚇 📦
_{Tobias Deekens} 🐛	_{Victor Cordova} 💻 ⚠️ 🐛	_{Dmitry Lobanov} 💻 ⚠️	_{Kent C. Dodds} 🐛	_{Gonzalo D'Elia} 💻 ⚠️ 📖 👀	_{Jeff Rifwald} 📖	_{Leandro Lourenci} 🐛 💻 ⚠️
_{Miguel Erja González} 🐛	_{Pavel Pustovalov} 🐛	_{Jacob Parish} 🐛 💻 ⚠️	_{Nick McCurdy} 🤔 💻 👀	_{Stefan Cameron} 🐛	_{Mateus Felix} 💻 ⚠️ 📖	_{Renato Augusto Gama dos Santos} 🤔 💻 📖 ⚠️
_{Josh Kelly} 💻	_{Alessia Bellisario} 💻 ⚠️ 📖	_{Spencer Miskoviak} 💻 ⚠️ 📖 🤔	_{Giorgio Polvara} 💻 ⚠️ 📖	_{Josh David} 📖	_{Michaël De Boey} 💻 📦 🚧	_{Jian Huang} 💻 ⚠️ 📖