attr-auto-inject-plugin

Automatic generation of data-testid attributes for React components.

Supported Bundlers

| Bundler | Status | |---------------|--------------| | Webpack | ✅ Supported | | Rspack | ✅ Supported | | Vite | ✅ Supported |

Features

• ⚡ Fast - uses OXC parser instead of Babel for maximum performance
• ✅ Reliable - AST-based parsing, not regular expressions
• 🎯 Smart ID generation - automatically creates unique identifiers based on component structure
• ⚙️ Customizable attribute - can change the attribute name (default: data-testid)

Installation

npm install -D attr-auto-inject-plugin

Usage

Webpack

Loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'attr-auto-inject-plugin/webpack-loader',
            options: {
              attributeName: 'data-testid',
            },
          },
        ],
      },
    ],
  },
};

Rspack

const { attrAutoInjectRspack } = require('attr-auto-inject-plugin');

export default {
  plugins: [
    attrAutoInjectRspack({
      attributeName: 'data-testid',
    }),
  ],
};

Vite

import { defineConfig } from 'vite'
import { attrAutoInjectVite } from 'attr-auto-inject-plugin'

export default defineConfig({
  plugins: [
    attrAutoInjectVite({
      attributeName: 'data-testid',
    }),
  ],
})

Options

attributeName

Type: string
Default: 'data-testid'

The name of the attribute that will be added to JSX elements.

// Use data-marker instead of data-testid
attrAutoInjectRspack({
  attributeName: 'data-marker',
});

// <Button /> → <Button data-marker="Button" />

How It Works

The plugin analyzes JSX code at the AST level and automatically adds data-testid attributes to every JSX element.

ID Generation

IDs are generated following the <Component>.<Tag> pattern:

// src/components/Header/Header.tsx
const Header = () => {
  return <header />;  // → data-testid="Header.header"
};

For nested components, the parent component name is used:

// src/components/Layout/index.tsx
const App = () => {
  return (
    <div>                    // → data-testid="App.div"
      <Header />             // → data-testid="App.Header"
      <main>                 // → data-testid="App.main"
        <p>Hello</p>         // → data-testid="App.p"
      </main>
      <Footer />             // → data-testid="App.Footer"
    </div>
  );
};

Render Functions

Functions starting with render are taken into account during ID generation:

// src/components/Card.tsx
const Card = () => {
  const renderIcon = () => {
    return <span className="icon" />;  // → data-testid="Card.Icon.span"
  };
  
  return <div>{renderIcon()}</div>;    // → data-testid="Card.div"
};

Duplicates

When duplicate tags exist, a counter is appended:

// src/components/Form.tsx
const Form = () => {
  return (
    <div />   // → data-testid="Form.div"
    <div />   // → data-testid="Form.div_2"
    <div />   // → data-testid="Form.div_3"
  );
};

Default Export

// src/pages/Login.tsx
export default () => {
  return <div />;  // → data-testid="default.div"
};

Ignored Tags

The following tags are skipped and do not receive an attribute:

• Fragment
• React.Fragment

Advantages

• ⚡ Performance - OXC parser is significantly faster than Babel
• 📦 Fewer dependencies - no need for @babel/core or plugins
• 🔄 Native TypeScript support - no separate plugins needed for TS/JSX
• ⚙️ Flexibility - can customize the attribute name to your needs

License

MIT