@metagptx/vite-plugin-testid-checker

A Vite plugin that checks for required attributes (like data-testid) on interactive elements in Vue and React/JSX files during the build process.

Features

• 🔍 Automatic Detection: Identifies interactive elements that need test IDs
• 🚀 Framework Support: Works with Vue and React/JSX/TSX files
• ⚡ Fast: Built-in caching mechanism for optimal performance
• 🛠️ Configurable: Customize which attributes to check and which files to include/exclude
• 🎯 Build-time Validation: Catches missing test IDs before they reach production

Installation

npm install @metagptx/vite-plugin-testid-checker --save-dev

or

pnpm add @metagptx/vite-plugin-testid-checker -D

or

yarn add @metagptx/vite-plugin-testid-checker --dev

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite'
import { vitePluginTestIdChecker } from '@metagptx/vite-plugin-testid-checker'

export default defineConfig({
  plugins: [
    vitePluginTestIdChecker({
      // Optional configuration
      attributes: ['data-testid'],
      include: ['src/**/*.{vue,jsx,tsx,js,ts}'],
      exclude: ['src/**/*.test.{js,ts,jsx,tsx}']
    })
  ]
})

Configuration

The plugin accepts the following options:

| Option | Type | Default | Description | |--------|------|---------|-------------| | attributes | string[] | ['data-testid'] | Array of attribute names to check for | | include | string \| string[] | ['src/**/*.{vue,jsx,tsx,js,ts}'] | Files to include (glob patterns) | | exclude | string \| string[] | [] | Files to exclude (glob patterns) |

What Elements Are Checked

The plugin checks for required attributes on the following interactive elements:

HTML Elements

• <a> - Links
• <button> - Buttons
• <input> - Input fields
• <textarea> - Text areas
• <select> - Select dropdowns
• <option> - Select options

React/JSX Elements

Elements with event handlers (e.g., onClick, onChange, onSubmit, etc.)

Vue Elements

Elements with the following Vue directives:

• @click
• @change
• @input
• @focus
• @blur
• @mouseover
• @mouseout
• @mouseenter
• @mouseleave
• @mousemove
• @mouseup
• @mousedown
• @mousewheel
• @keydown
• @keyup
• @keypress

Examples

Vue Example

❌ This will cause a build error:

<template>
  <button @click="handleClick">Click me</button>
</template>

✅ This will pass:

<template>
  <button @click="handleClick" data-testid="click-button">Click me</button>
</template>

React/JSX Example

❌ This will cause a build error:

function MyComponent() {
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

✅ This will pass:

function MyComponent() {
  return (
    <button onClick={handleClick} data-testid="click-button">Click me</button>
  );
}

Custom Attributes

You can configure the plugin to check for custom attributes:

vitePluginTestIdChecker({
  attributes: ['data-testid', 'data-cy', 'data-test']
})

Now the plugin will check for any of these attributes:

// Any of these will pass:
<button onClick={handleClick} data-testid="button">Click</button>
<button onClick={handleClick} data-cy="button">Click</button>
<button onClick={handleClick} data-test="button">Click</button>

Error Messages

When the plugin detects missing attributes, it will show descriptive error messages:

data-testid is required for button in src/components/Button.vue:15:8
data-testid is required for input in src/components/Form.tsx:22:12

Build Integration

The plugin runs during the build process and will:

1. ✅ Pass silently if all interactive elements have required attributes
2. ❌ Throw an error and stop the build if any required attributes are missing

Performance

The plugin includes built-in caching to ensure optimal performance:

• Files are cached based on their content hash
• Only changed files are re-processed
• Minimal impact on build times

Requirements

• Node.js >= 14.0.0
• Vite ^3.0.0 || ^4.0.0 || ^5.0.0