eslint-plugin-testing-library weekly downloads statistics

eslint-plugin-testing-library

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

[![Package version][version-badge]][version-url] [![eslint-remote-tester][eslint-remote-tester-badge]][eslint-remote-tester-workflow] [![eslint-plugin-testing-library][package-health-badge]][package-health-url]

[![MIT License][license-badge]][license-url]

[![PRs Welcome][pr-badge]][pr-url] [![All Contributors][all-contributors-badge]](#contributors-)

Prerequisites

To use this plugin, you must have Node.js (^18.18.0, ^20.9.0, or >=21.1.0) installed.

Installation

You'll first need to install ESLint.

Next, install eslint-plugin-testing-library:

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

Migrating

You can find detailed guides for migrating eslint-plugin-testing-library in the migration guide docs:

• Migration guide for v4 • Migration guide for v5 • Migration guide for v6 • Migration guide for v7

Usage

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

Then configure the rules you want to use within rules property of your .eslintrc:

Run the plugin only against test files

With the default setup mentioned before, eslint-plugin-testing-library will be run against your whole codebase. If you want to run this plugin only against your tests files, you have the following options:

ESLint overrides

One way of restricting ESLint config by file patterns is by using ESLint overrides.

Assuming you are using the same pattern for your test files as Jest by default, the following config would run eslint-plugin-testing-library only against your test files:

ESLint Cascading and Hierarchy

Another approach for customizing ESLint config by paths is through ESLint Cascading and Hierarchy. This is useful if all your tests are placed under the same folder, so you can place there another .eslintrc where you enable eslint-plugin-testing-library for applying it only to the files under such folder, rather than enabling it on your global .eslintrc which would apply to your whole project.

Shareable configurations

[!NOTE]

eslint.config.js compatible versions of configs are available prefixed with flat/, though most of the plugin documentation still currently uses .eslintrc syntax.

Refer to the ESLint documentation on the new configuration file format for more.

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, under the Configurations column.

Since each one of these configurations is aimed at a particular Testing Library package, they are not extendable between them, so you should use only one of them at once per .eslintrc file. For example, if you want to enable recommended configuration for React, you don't need to combine it somehow with DOM one:

DOM Testing Library

Enforces recommended rules for DOM Testing Library.

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

To enable this configuration with eslint.config.js, use testingLibrary.configs['flat/dom']:

Angular

Enforces recommended rules for Angular Testing Library.

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

To enable this configuration with eslint.config.js, use testingLibrary.configs['flat/angular']:

React

Enforces recommended rules for React Testing Library.

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

To enable this configuration with eslint.config.js, use testingLibrary.configs['flat/react']:

Vue

Enforces recommended rules for Vue Testing Library.

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

To enable this configuration with eslint.config.js, use testingLibrary.configs['flat/vue']:

Svelte

Enforces recommended rules for Svelte Testing Library.

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

To enable this configuration with eslint.config.js, use testingLibrary.configs['flat/svelte']:

Marko

Enforces recommended rules for Marko Testing Library.

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

To enable this configuration with eslint.config.js, use testingLibrary.configs['flat/marko']:

Supported Rules

Remember that all rules from this plugin are prefixed by "testing-library/"

💼 Configurations enabled in.\ ⚠️ Configurations set to warn in.\ Set in the angular configuration.\ Set in the dom configuration.\ Set in the marko configuration.\ Set in the react configuration.\ Set in the svelte configuration.\ Set in the vue configuration.\ 🔧 Automatically fixable by the --fix CLI option.

| Name | Description | 💼 | ⚠️ | 🔧 |…

Description from the npm listing.