Wondering what’s next for npm?Check out our public roadmap! »

    eslint-plugin-testing-library

    4.0.1 • Public • Published

    eslint-plugin-testing-library

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


    Build status Package version MIT License
    semantic-release PRs Welcome All Contributors
    Watch on Github Star on Github Tweet

    Installation

    You'll first need to install ESLint:

    $ npm install --save-dev eslint
    # or
    $ yarn add --dev eslint

    Next, install eslint-plugin-testing-library:

    $ npm install --save-dev eslint-plugin-testing-library
    # or
    $ yarn add --dev 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 to v4

    You can find here a detailed guide for migrating eslint-plugin-testing-library to v4.

    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 within rules property of your .eslintrc:

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

    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, 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:

    // ❌ Don't do this
    {
      "extends": ["plugin:testing-library/dom", "plugin:testing-library/react"]
    }
    
    // ✅ Do just this instead
    {
      "extends": ["plugin:testing-library/react"]
    }

    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
    testing-library/await-async-query Enforce promises from async queries to be handled dom-badge angular-badge react-badge vue-badge
    testing-library/await-async-utils Enforce async utils to be awaited properly dom-badge angular-badge react-badge vue-badge
    testing-library/await-fire-event Enforce promises from fire event methods to be handled vue-badge
    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 dom-badge angular-badge react-badge vue-badge
    testing-library/no-container Disallow the use of container methods angular-badge react-badge vue-badge
    testing-library/no-debug Disallow the use of debug angular-badge react-badge vue-badge
    testing-library/no-dom-import Disallow importing from DOM Testing Library angular-badge react-badge vue-badge fixable-badge
    testing-library/no-manual-cleanup Disallow the use of cleanup
    testing-library/no-node-access Disallow direct Node access angular-badge react-badge vue-badge
    testing-library/no-promise-in-fire-event Disallow the use of promises passed to a fireEvent method dom-badge angular-badge react-badge vue-badge
    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 dom-badge angular-badge react-badge vue-badge
    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 dom-badge angular-badge react-badge vue-badge fixable-badge
    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 dom-badge angular-badge react-badge vue-badge
    testing-library/prefer-wait-for Use waitFor instead of deprecated wait methods fixable-badge
    testing-library/render-result-naming-convention Enforce a valid naming for return value from render angular-badge react-badge vue-badge

    Shared Settings

    There are some configuration options available that will be shared across all the plugin rules. This is achieved using ESLint Shared Settings. These Shared Settings are meant to be used if you need to restrict the Aggressive Reporting mechanism, which is an out of the box advanced feature to lint Testing Library usages in a simpler way for most of the users. So please before configuring any of these settings, read more about the advantages of eslint-plugin-testing-library Aggressive Reporting mechanism, and how it's affected by these settings.

    If you are sure about configuring the settings, these are the options available:

    testing-library/utils-module

    The name of your custom utility file from where you re-export everything from Testing Library package.

    // .eslintrc
    {
      "settings": {
        "testing-library/utils-module": "my-custom-test-utility-file"
      }
    }

    You can find more details here.

    testing-library/custom-renders

    A list of function names that are valid as Testing Library custom renders. Relates to Aggressive Reporting - Renders

    // .eslintrc
    {
      "settings": {
        "testing-library/custom-renders": ["display", "renderWithProviders"]
      }
    }

    You can find more details here.

    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

    💻 ⚠️ 📖

    Philipp Fritsche

    💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i eslint-plugin-testing-library

    DownloadsWeekly Downloads

    1,556,733

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    166 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar