or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdplugin-configuration.mdrules.md
tile.json

tessl/npm-eslint-plugin-testing-library

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-testing-library@7.6.x

To install, run

npx @tessl/cli install tessl/npm-eslint-plugin-testing-library@7.6.0

index.mddocs/

ESLint Plugin Testing Library

ESLint Plugin Testing Library is a comprehensive ESLint plugin that provides best practices enforcement and common mistake prevention for Testing Library usage across multiple JavaScript testing frameworks including React, Vue, Angular, Svelte, and Marko.

Package Information

  • Package Name: eslint-plugin-testing-library
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev eslint-plugin-testing-library

Core Imports

// CommonJS (legacy configuration)
module.exports = {
  plugins: ['testing-library'],
  extends: ['plugin:testing-library/react'], // or dom, angular, vue, svelte, marko
  rules: {
    'testing-library/await-async-queries': 'error',
    'testing-library/no-debugging-utils': 'warn'
  }
};

For ESLint v9+ flat config:

import testingLibrary from 'eslint-plugin-testing-library';

export default [
  {
    plugins: {
      'testing-library': testingLibrary
    },
    rules: {
      'testing-library/await-async-queries': 'error',
      'testing-library/no-debugging-utils': 'warn'
    }
  },
  // Or use preset configurations
  testingLibrary.configs['flat/react']
];

Basic Usage

// .eslintrc.js (legacy configuration)
module.exports = {
  extends: ['plugin:testing-library/react'],
  rules: {
    // Override specific rules
    'testing-library/no-debugging-utils': 'warn',
    'testing-library/prefer-screen-queries': 'error'
  }
};

For framework-specific usage:

// React Testing Library
extends: ['plugin:testing-library/react']

// Vue Testing Library  
extends: ['plugin:testing-library/vue']

// Angular Testing Library
extends: ['plugin:testing-library/angular']

// DOM Testing Library
extends: ['plugin:testing-library/dom']

// Svelte Testing Library
extends: ['plugin:testing-library/svelte']

// Marko Testing Library
extends: ['plugin:testing-library/marko']

Capabilities

Plugin Configuration

Core plugin object providing ESLint integration with metadata, rules, and framework-specific configurations.

interface Plugin {
  meta: {
    name: string;
    version: string;
  };
  configs: {
    angular: Linter.LegacyConfig;
    dom: Linter.LegacyConfig;
    marko: Linter.LegacyConfig;
    react: Linter.LegacyConfig;
    svelte: Linter.LegacyConfig;
    vue: Linter.LegacyConfig;
    'flat/angular': Linter.FlatConfig;
    'flat/dom': Linter.FlatConfig;
    'flat/marko': Linter.FlatConfig;
    'flat/react': Linter.FlatConfig;
    'flat/svelte': Linter.FlatConfig;
    'flat/vue': Linter.FlatConfig;
  };
  rules: {
    [key: string]: Rule.RuleModule;
  };
}

Plugin Configuration

ESLint Rules

28 comprehensive ESLint rules that enforce Testing Library best practices across async/await patterns, query selection, DOM access, testing patterns, user interactions, assertions, and naming conventions.

interface RuleModule {
  meta: {
    type: 'problem' | 'suggestion' | 'layout';
    docs: {
      description: string;
      category: string;
      recommended: boolean;
      url: string;
    };
    fixable?: 'code' | 'whitespace';
    schema: JSONSchema4 | JSONSchema4[];
  };
  create: (context: RuleContext) => RuleListener;
}

Rule Categories:

  • Async/Await Rules (5 rules): await-async-queries, await-async-utils, no-await-sync-queries, etc.
  • Query Selection Rules (6 rules): prefer-find-by, prefer-screen-queries, no-test-id-queries, etc.
  • DOM Access Rules (3 rules): no-container, no-node-access, no-dom-import
  • Testing Pattern Rules (8 rules): no-debugging-utils, no-manual-cleanup, no-unnecessary-act, etc.
  • Event/Interaction Rules (2 rules): prefer-user-event, no-promise-in-fire-event
  • Assertion Rules (2 rules): prefer-explicit-assert, prefer-implicit-assert
  • Convention Rules (2 rules): consistent-data-testid, render-result-naming-convention

ESLint Rules

Types

import type { Linter, Rule } from 'eslint';

// Main plugin export structure
interface Plugin {
  meta: {
    name: string;
    version: string;
  };
  configs: {
    angular: Linter.LegacyConfig;
    dom: Linter.LegacyConfig;
    marko: Linter.LegacyConfig;
    react: Linter.LegacyConfig;
    svelte: Linter.LegacyConfig;
    vue: Linter.LegacyConfig;
    'flat/angular': Linter.FlatConfig;
    'flat/dom': Linter.FlatConfig;
    'flat/marko': Linter.FlatConfig;
    'flat/react': Linter.FlatConfig;
    'flat/svelte': Linter.FlatConfig;
    'flat/vue': Linter.FlatConfig;
  };
  rules: {
    [key: string]: Rule.RuleModule;
  };
}

// Supported testing frameworks
type SupportedTestingFramework = 'dom' | 'angular' | 'react' | 'vue' | 'svelte' | 'marko';