当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

eslint-plugin-testing-library

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 巢权
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

eslint-plugin-testing-library

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


Build status

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

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

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"
  }
}

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:

// .eslintrc
{
  // 1) Here we have our usual config which applies to the whole project, so we don't put testing-library preset here.
  "extends": ["airbnb", "plugin:prettier/recommended"],

  // 2) We load eslint-plugin-testing-library globally with other ESLint plugins.
  "plugins": ["react-hooks", "testing-library"],

  "overrides": [
    {
      // 3) Now we enable eslint-plugin-testing-library rules or preset only for matching files!
      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
      "extends": ["plugin:testing-library/react"]
    },
  ],
};

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

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

Key: �� = fixable

Configurations: = dom, = angular, = react, = vue

Name Description �� Included in configurations
testing-library/await-async-query Enforce promises from async queries to be handled
testing-library/await-async-utils Enforce promises from async utils to be awaited properly
testing-library/await-fire-event Enforce promises from fireEvent methods to be handled
testing-library/consistent-data-testid Ensures consistent usage of data-testid
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 debugging utilities like 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 testing frameworks setup functions
testing-library/no-unnecessary-act Disallow wrapping Testing Library utils or empty callbacks in act
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 calls inside waitFor
testing-library/no-wait-for-side-effects Disallow the use of side effects in 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 standalone queries
testing-library/prefer-find-by Suggest using find(All)By* query instead of waitFor + get(All)By* to wait for elements ��
testing-library/prefer-presence-queries Ensure appropriate get*/query* queries are used with their respective matchers
testing-library/prefer-query-by-disappearance Suggest using queryBy* queries when waiting for disappearance
testing-library/prefer-screen-queries Suggest using screen while querying
testing-library/prefer-user-event Suggest using userEvent over fireEvent for simulating user interactions
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

Aggressive Reporting

In v4 this plugin introduced a new feature called "Aggressive Reporting", which intends to detect Testing Library utils usages even if they don't come directly from a Testing Library package (i.e. using a custom utility file to re-export everything from Testing Library). You can read more about this feature here.

If you are looking to restricting or switching off this feature, please refer to the Shared Settings section to do so.

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 or switch off the Aggressive Reporting, 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 feature, 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 the Testing Library package, or "off" to switch related Aggressive Reporting mechanism off. Relates to Aggressive Imports Reporting.

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

You can find more details about the utils-module setting here.

testing-library/custom-renders

A list of function names that are valid as Testing Library custom renders, or "off" to switch related Aggressive Reporting mechanism off. Relates to Aggressive Renders Reporting.

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

You can find more details about the custom-renders setting here.

testing-library/custom-queries

A list of query names/patterns that are valid as Testing Library custom queries, or "off" to switch related Aggressive Reporting mechanism off. Relates to Aggressive Reporting - Queries

// .eslintrc
{
  "settings": {
    "testing-library/custom-queries": ["ByIcon", "getByComplexText"]
  }
}

You can find more details about the custom-queries setting here.

Switching all Aggressive Reporting mechanisms off

Since each Shared Setting is related to one Aggressive Reporting mechanism, and they accept "off" to opt out of that mechanism, you can switch the entire feature off by doing:

// .eslintrc
{
  "settings": {
    "testing-library/utils-module": "off",
    "testing-library/custom-renders": "off",
    "testing-library/custom-queries": "off"
  }
}

Troubleshooting

Errors reported in non-testing files

If you find ESLint errors related to eslint-plugin-testing-library in files other than testing, this could be caused by Aggressive Reporting.

You can avoid this by:

  1. running eslint-plugin-testing-library only against testing files
  2. limiting the scope of Aggressive Reporting through Shared Settings
  3. switching Aggressive Reporting feature off

If you think the error you are getting is not related to this at all, please fill a new issue with as many details as possible.

False positives in testing files

If you are getting false positive ESLint errors in your testing files, this could be caused by Aggressive Reporting.

You can avoid this by:

  1. limiting the scope of Aggressive Reporting through Shared Settings
  2. switching Aggressive Reporting feature off

If you think the error you are getting is not related to this at all, please fill a new issue with as many details as possible.

Other documentation

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

��

Tomas Zaicevas

�� �� ⚠️ ��

Gareth Jones

�� �� ⚠️

HonkingGoose

�� ��

Julien Wajsberg

�� �� ⚠️

Marat Dyatko

�� ��

David Tolman

��

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

  • 1. 前言 ESLint 是前端最流行的代码校验工具,它提供了许多插件 (plugins) 和共享配置 (extends) 来扩展其功能。然而,在安装某些共享配置时,用户常常还需要安装一些插件依赖项。 以 eslint-config-airbnb(最流行的可共享配置之一)为例,除了安装 eslint-config-airbnb 外,还需要安装众多对等依赖(peerDependencies),比如

 相关资料
  • eslint-plugin-sql SQL linting rules for ESLint. In its current form, the plugin has been designed and tested to work with Postgres codebase. eslint-plugin-sql Installation Configuration Settings place

  • eslint-plugin-vue Official ESLint plugin for Vue.js �� Documentation See the official website. ⚓ Versioning Policy This plugin is following Semantic Versioning and ESLint's Semantic Versioning Policy.

  • eslint-plugin-node Additional ESLint's rules for Node.js �� Install & Usage $ npm install --save-dev eslint eslint-plugin-node Requires Node.js >=8.10.0 Requires ESLint >=5.16.0 Note: It recommends a

  • eslint-plugin-ember An ESLint plugin that provides a set of rules for Ember applications based on commonly known good practices. ❗️ Requirements ESLint >= 6 Node.js 10.* || 12.* || >= 14 �� Usage 1. I

  • eslint-plugin-wxml 为 lint 微信小程序 wxml 文件而开发的 eslint 插件,可使用 eslint 来检查微信小程序项目内的 wxml 代码 当开发者使用 VSCode 或者 Webstorm 时可以得到代码错误提示,目前支持的 lint 规则如下: 1. wxml/colon-style-event-binding 强制使用:冒号隔开时间绑定 2. wxml/emp

  • eslint-plugin-optimize-regex Optimize regex literals Installation You'll first need to install ESLint: npm i eslint --save-dev Next, install eslint-plugin-optimize-regex: npm install eslint-plugin-opt