eslint-plugin-react-data-cy

Overview

This ESLint plugin enforces the presence of a data-cy attribute (or other specified test attributes) on specified React components to improve end-to-end (E2E) testing practices.

Installation

To install the plugin, run:

1npm install --save-dev eslint-plugin-react-data-cy

or

1yarn add -D eslint-plugin-react-data-cy

Usage

Enable the Plugin

Add react-data-cy to your ESLint configuration:

1{
2  "extends": ["plugin:react-data-cy/recommended"]
3}

or manually configure the rule:

1{
2  "plugins": ["react-data-cy"],
3  "rules": {
4    "react-data-cy/react-data-cy-rule": "error"
5  }
6}

Rule Configuration

The rule accepts an optional configuration object:

1{
2  "rules": {
3    "react-data-cy/react-data-cy-rule": [
4      "error",
5      {
6        "testAttributes": ["data-cy", "data-testid"],
7        "components": ["Button", "Input", "*"]
8      }
9    ]
10  }
11}

Options

• testAttributes (array, optional): List of valid test attributes (default: ['data-cy']).
• components (array, optional): List of components to enforce the rule on. Supports "*" to apply to all components.

Example Code

✅ Correct Usage

1<Button data-cy="submit-button" />
2<Input data-testid="username-input" />

❌ Incorrect Usage

1<Button />  // ❌ Missing required test attribute
2<Input />  // ❌ Missing required test attribute

License

MIT