react-testing-library.md

react-testing-library config

Config for projects using React Testing Library for testing.

🏗️ Setup

1. If you haven't already, make sure to install @code-pushup/eslint-config and its required peer dependencies.

2. Since this plugin requires additional peer dependencies, you have to install them as well:

   npm install -D eslint-plugin-testing-library

3. Add to your eslint.config.js file:

   import react-testing-library from '@code-pushup/eslint-config/react-testing-library.js';
   import tseslint from 'typescript-eslint';
   
   export default tseslint.config(...react-testing-library);

📏 Rules (25)

🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.

🚨 Errors (9)

Plugin	Rule	Options	Autofix	Overrides
	await-async-events Enforce promises from async event methods are handled	eventModule: userEvent { "eventModule": "userEvent" }	🔧
	await-async-queries Enforce promises from async queries to be handled
	await-async-utils Enforce promises from async utils to be awaited properly
	no-dom-import Disallow importing from DOM Testing Library	react "react"	🔧
	no-global-regexp-flag-in-query Disallow the use of the global RegExp flag (/g) in queries		🔧
	no-promise-in-fire-event Disallow the use of promises passed to a fireEvent method
	no-unnecessary-act Disallow wrapping Testing Library utils or empty callbacks in act
	no-wait-for-side-effects Disallow the use of side effects in waitFor
	no-wait-for-snapshot Ensures no snapshot is generated inside of a waitFor call

⚠️ Warnings (16)

Plugin	Rule	Options	Autofix	Overrides
	no-await-sync-events Disallow unnecessary await for sync events
	no-await-sync-queries Disallow unnecessary await for sync queries
	no-container Disallow the use of container methods
	no-debugging-utils Disallow the use of debugging utilities like debug
	no-manual-cleanup Disallow the use of cleanup
	no-node-access Disallow direct Node access
	no-render-in-lifecycle Disallow the use of render in testing frameworks setup functions
	no-wait-for-multiple-assertions Disallow the use of multiple expect calls inside waitFor
	prefer-explicit-assert Suggest using explicit assertions rather than standalone queries
	prefer-find-by Suggest using find(All)By* query instead of waitFor + get(All)By* to wait for elements		🔧
	prefer-presence-queries Ensure appropriate get*/query* queries are used with their respective matchers
	prefer-query-by-disappearance Suggest using queryBy* queries when waiting for disappearance
	prefer-query-matchers Ensure the configured get*/query* query is used with the corresponding matchers	validEntries: [{"matcher":"... { "validEntries": [ { "matcher": "toBeVisible", "query": "get" }, { "matcher": "toHaveTextContent", "query": "get" }, { "matcher": "toBeEnabled", "query": "get" }, { "matcher": "toBeDisabled", "query": "get" }, { "matcher": "toBeChecked", "query": "get" } ] }
	prefer-screen-queries Suggest using screen while querying
	prefer-user-event Suggest using userEvent over fireEvent for simulating user interactions
	render-result-naming-convention Enforce a valid naming for return value from render