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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-eslint-plugin-testing-library
Author: tessl

ESLint Plugin Testing Library provides comprehensive ESLint integration with preset configurations for different testing frameworks and both legacy and flat config formats.

Capabilities

Plugin Installation and Setup

Install the plugin as a development dependency and configure it in your ESLint configuration.

// Installation
npm install --save-dev eslint-plugin-testing-library

Legacy Configuration (.eslintrc.js)

Traditional ESLint configuration format using extends and plugins.

// Basic configuration
module.exports = {
  plugins: ['testing-library'],
  extends: ['plugin:testing-library/react'], // or dom, angular, vue, svelte, marko
};

// With custom rule overrides
module.exports = {
  plugins: ['testing-library'],
  extends: ['plugin:testing-library/react'],
  rules: {
    'testing-library/await-async-queries': 'error',
    'testing-library/no-debugging-utils': 'warn',
    'testing-library/prefer-screen-queries': 'error'
  }
};

Flat Configuration (ESLint v9+)

Modern ESLint flat configuration format.

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']
];

Framework-Specific Configurations

The plugin provides preset configurations optimized for different Testing Library frameworks.

interface Configs {
  // Legacy configurations
  angular: Linter.LegacyConfig;
  dom: Linter.LegacyConfig;
  marko: Linter.LegacyConfig;
  react: Linter.LegacyConfig;
  svelte: Linter.LegacyConfig;
  vue: Linter.LegacyConfig;
  
  // Flat configurations (ESLint v9+)
  'flat/angular': Linter.FlatConfig;
  'flat/dom': Linter.FlatConfig;
  'flat/marko': Linter.FlatConfig;
  'flat/react': Linter.FlatConfig;
  'flat/svelte': Linter.FlatConfig;
  'flat/vue': Linter.FlatConfig;
}

Legacy Configuration Examples:

// React Testing Library
module.exports = {
  extends: ['plugin:testing-library/react']
};

// Vue Testing Library
module.exports = {
  extends: ['plugin:testing-library/vue']
};

// Angular Testing Library
module.exports = {
  extends: ['plugin:testing-library/angular']
};

// DOM Testing Library
module.exports = {
  extends: ['plugin:testing-library/dom']
};

// Svelte Testing Library
module.exports = {
  extends: ['plugin:testing-library/svelte']
};

// Marko Testing Library
module.exports = {
  extends: ['plugin:testing-library/marko']
};

Flat Configuration Examples:

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

// React Testing Library
export default [testingLibrary.configs['flat/react']];

// Vue Testing Library
export default [testingLibrary.configs['flat/vue']];

// Angular Testing Library
export default [testingLibrary.configs['flat/angular']];

// DOM Testing Library
export default [testingLibrary.configs['flat/dom']];

// Svelte Testing Library
export default [testingLibrary.configs['flat/svelte']];

// Marko Testing Library
export default [testingLibrary.configs['flat/marko']];

Plugin Structure

The exported plugin object contains metadata, rules, and configurations.

interface Plugin {
  meta: {
    name: string;        // Package name
    version: string;     // Package version
  };
  configs: {
    // Framework-specific rule configurations
    [framework: string]: Linter.LegacyConfig | Linter.FlatConfig;
  };
  rules: {
    // All available ESLint rules
    [ruleName: string]: Rule.RuleModule;
  };
}

Advanced Configuration

Combine multiple configurations or override specific rules for custom setups.

// Multiple testing frameworks
module.exports = {
  overrides: [
    {
      files: ['**/*.test.{js,jsx,ts,tsx}'],
      extends: ['plugin:testing-library/react']
    },
    {
      files: ['**/*.e2e.{js,ts}'],
      extends: ['plugin:testing-library/dom']
    }
  ]
};

// Custom rule severity
module.exports = {
  extends: ['plugin:testing-library/react'],
  rules: {
    // Make debugging utils warnings instead of errors
    'testing-library/no-debugging-utils': 'warn',
    // Enforce strict async patterns
    'testing-library/await-async-queries': 'error',
    'testing-library/await-async-utils': 'error'
  }
};

Types

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

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

// Configuration formats
interface LegacyConfig extends Linter.LegacyConfig {
  rules: {
    [ruleName: string]: Linter.RuleEntry;
  };
}

interface FlatConfig extends Linter.FlatConfig {
  plugins: {
    'testing-library': Plugin;
  };
  rules: {
    [ruleName: string]: Linter.RuleEntry;
  };
}