ESLint plugin to enforce data-testid attributes on interactive elements for better testing practices.
- 🎯 Configurable: Define which elements and custom components require test IDs
- 🔧 Auto-fixable: Automatically suggests and inserts missing test IDs
- ⚡ Smart suggestions: Generates meaningful test IDs based on context
- 🚀 Zero dependencies: Only uses ESLint and Node.js built-ins
- 📦 Plug-and-play: Easy to integrate into any React project
npm install eslint-plugin-autotestid --save-dev// eslint.config.js import testidPlugin from "eslint-plugin-autotestid"; export default [ { plugins: { autotestid: testidPlugin, }, rules: { "autotestid/require-testid": "error", }, }, ];// eslint.config.js (flat config) import testidPlugin from "eslint-plugin-autotestid"; export default [ { plugins: { autotestid: testidPlugin }, extends: ["plugin:autotestid/recommended"], }, ];// eslint.config.js import testidPlugin from "eslint-plugin-autotestid"; export default [ { plugins: { autotestid: testidPlugin, }, rules: { "autotestid/require-testid": [ "error", { // Native HTML elements that require data-testid elements: [ "button", "input", "select", "textarea", "a", "form", "div", ], // Custom React components that require dataTestId prop customComponents: [ "Button", "Card", "SearchBar", "Dialog", "Snackbar", "Dropdown", "Menu", ], // File patterns to exclude exclude: ["**/*.test.jsx", "**/*.spec.jsx", "**/*.stories.jsx"], // Test ID naming pattern pattern: "{page}-{purpose}-{element}", }, ], }, }, ];| Option | Type | Default | Description |
|---|---|---|---|
elements | string[] | ['button', 'input', 'select', 'textarea', 'a', 'form', 'div'] | Native HTML elements that require data-testid |
customComponents | string[] | [] | Custom React components that require dataTestId prop |
exclude | string[] | [] | File patterns to exclude from the rule |
pattern | string | '{page}-{purpose}-{element}' | Test ID naming pattern |
The plugin generates test IDs using the following pattern:
{page}- Extracted from filename (e.g.,login-pagefromLoginPage.jsx){purpose}- Inferred from props or content (e.g.,submitfrom button text){element}- Element type (e.g.,button,input)
Example: login-submit-button
// ❌ Missing data-testid <button onClick={handleClick}>Submit</button> // ✅ With data-testid <button data-testid="login-submit-button" onClick={handleClick}>Submit</button>// ❌ Missing dataTestId prop <Button onClick={handleClick}>Submit</Button> // ✅ With dataTestId prop <Button dataTestId="login-submit-button" onClick={handleClick}>Submit</Button>// Design system Button component export function Button({ dataTestId, children, ...restProps }) { return ( <button data-testid={dataTestId} {...restProps}> {children} </button> ); } // Usage in app code function LoginForm() { return ( <Button dataTestId="login-submit-button" type="submit"> Submit </Button> ); }The plugin can automatically fix missing test IDs:
npx eslint . --fixEnforces data-testid attributes on interactive elements.
Options:
elements(string[]): Native HTML elements to checkcustomComponents(string[]): Custom React components to checkexclude(string[]): File patterns to excludepattern(string): Test ID naming pattern
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT © Yash Chavan (Hunt092)
- Initial release
- Configurable elements and custom components
- Auto-fix support
- Smart test ID generation