eslint-plugin-testing-library
Advanced tools
The eslint-plugin-testing-library package is an ESLint plugin that provides linting rules for writing tests with the Testing Library, which is a set of utilities for testing UI components in a user-centric way. This plugin helps enforce best practices and eliminate common mistakes when writing tests with Testing Library.
Enforce consistent usage of Testing Library queries
This rule enforces the use of the `screen` object for querying DOM elements, which provides better consistency and avoids destructuring render result.
/* eslint testing-library/prefer-screen-queries: 'error' */
// Bad
const { getByText } = render(<App />);
getByText('Hello World');
// Good
const screen = render(<App />);
screen.getByText('Hello World');Avoid using container methods
This rule prevents direct DOM manipulation by avoiding the use of the `container` method, encouraging the use of queries provided by Testing Library instead.
/* eslint testing-library/no-container: 'error' */
// Bad
const { container } = render(<App />);
container.querySelector('.my-class');
// Good
const { getByClassName } = render(<App />);
getByClassName('my-class');Ensure async queries are awaited
This rule ensures that asynchronous queries like `findBy*` are properly awaited or returned in tests, which is necessary for correct test execution.
/* eslint testing-library/await-async-query: 'error' */
// Bad
getByText('Loading...');
// Good
await findByText('Loaded');Prevent the use of debug
This rule warns or errors when the `debug` function is used, as it's intended for debugging purposes and should not be left in the final test code.
/* eslint testing-library/no-debug: 'warn' */
// Bad
const { debug } = render(<App />);
debug();
// Good
// No debug usageThis plugin provides ESLint rules for Jest DOM, which is a companion library for Testing Library that provides custom DOM element matchers for Jest. It enforces best practices and consistency for using Jest DOM matchers.
This plugin is focused on linting Jest test code. It includes a variety of rules that help enforce best practices and avoid common mistakes when writing tests with Jest, which is a popular testing framework.
This plugin provides linting rules for Cypress, an end-to-end testing framework. It enforces best practices and consistency when writing tests with Cypress, similar to how eslint-plugin-testing-library does for Testing Library.
ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library
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.
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"
}
}
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.
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"]
}
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"]
}
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"]
}
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"]
}
| Rule | Description | Configurations | Fixable |
|---|---|---|---|
| testing-library/await-async-query | Enforce promises from async queries to be handled |     | |
| testing-library/await-async-utils | Enforce async utils to be awaited properly | | |
| testing-library/await-fire-event | Enforce promises from fire event methods to be handled | | |
| testing-library/consistent-data-testid | Ensure data-testid values match a provided regex. | ||
| testing-library/no-await-sync-events | Disallow unnecessary await for sync events | ||
| testing-library/no-await-sync-query | Disallow unnecessary await for sync queries | | |
| testing-library/no-container | Disallow the use of container methods | | |
| testing-library/no-debug | Disallow the use of debug | | |
| testing-library/no-dom-import | Disallow importing from DOM Testing Library | |  |
| testing-library/no-manual-cleanup | Disallow the use of cleanup | ||
| testing-library/no-node-access | Disallow direct Node access | | |
| testing-library/no-promise-in-fire-event | Disallow the use of promises passed to a fireEvent method | ||
| testing-library/no-render-in-setup | Disallow the use of render in setup functions | ||
| testing-library/no-wait-for-empty-callback | Disallow empty callbacks for waitFor and waitForElementToBeRemoved | | |
| testing-library/no-wait-for-multiple-assertions | Disallow the use of multiple expect inside waitFor | ||
| testing-library/no-wait-for-side-effects | Disallow the use of side effects inside waitFor | ||
| testing-library/no-wait-for-snapshot | Ensures no snapshot is generated inside of a waitFor call | ||
| testing-library/prefer-explicit-assert | Suggest using explicit assertions rather than just getBy* queries | ||
| testing-library/prefer-find-by | Suggest using findBy* methods instead of the waitFor + getBy queries | | |
| testing-library/prefer-presence-queries | Enforce specific queries when checking element is present or not | ||
| testing-library/prefer-user-event | Suggest using userEvent library instead of fireEvent for simulating user interaction | ||
| testing-library/prefer-screen-queries | Suggest using screen while using queries | | |
| testing-library/prefer-wait-for | Use waitFor instead of deprecated wait methods | | |
| testing-library/render-result-naming-convention | Enforce a valid naming for return value from render | |
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library
We found that eslint-plugin-testing-library demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
