vite-plugin-inspector-testid

Dev-only Vite plugin that:

1. Auto-injects data-testid on every native JSX element at compile time via a Babel transform
2. Renders a floating inspector toolbar — hover to highlight elements, click to capture the testId, copy with one click

Usage

// vite.config.ts
import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vitePluginTestidOverlay, babelPluginTestid } from 'vite-plugin-inspector-testid'

const projectRoot = path.resolve(__dirname)

export default defineConfig(({ command }) => {
  const isDev = command === 'serve'
  return {
    plugins: [
      react({
        babel: isDev ? { plugins: [babelPluginTestid(projectRoot)] } : undefined,
      }),
      ...(isDev ? [vitePluginTestidOverlay()] : []),
    ],
  }
})

testId Format

src/components/user-card.tsx:L42:UserCard__button

| Segment | Source | |---|---| | src/components/user-card.tsx | File path relative to project root | | L42 | Line number of the JSX element | | UserCard | Enclosing component name | | button | HTML tag name |

Toolbar Behavior

| Action | Result | |---|---| | Click ● (gray) | Enable inspector (turns green, persistent) | | Hover app element | Blue outline highlight | | Click app element | testId shown in toolbar, stays in inspector mode | | Click 复制 | Copy testId to clipboard, shows ✓ briefly | | Click ● again | Disable inspector | | Press Escape | Disable inspector |

Rules

• Only active in dev mode (command === 'serve'), zero footprint in production builds
• Skips uppercase custom components (<MyComp />) — only injects on native HTML elements
• Respects manually set data-testid (won't overwrite)
• Toolbar runs in Shadow DOM — fully isolated from app styles