CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-plugin-testing-library

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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';
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-testing-library@7.6.x
Publish Source
CLI
Badge
tessl/npm-eslint-plugin-testing-library badge