@yasanchezz/eslint-plugin-vue-data-testid

@yasanchezz/eslint-plugin-vue-data-testid

An eslint plugin for checking accessibility rules from within .vue files. Add data-testid to use better behavior testing

💻 Installation

Plugin requires eslint@9.

install dependency

pnpm add -D @yasanchezz/eslint-plugin-vue-data-testid

describe dependency inside eslint config

import vueDataTestid, { type DataTestidOptions } from '@yasanchezz/eslint-plugin-vue-data-testid'

// e.g. convert filename and BEM class into data-testid
function buildDataTestId(options: DataTestidOptions) {
  // return `undefined`/`null` to skip adding an attribute to this node
  if (/([A-Z]).*([A-Z])/.test(options.nodeName) || options.nodeName === 'template') {
    return undefined
  }

  const filename = options.filename.replace('.vue', '')
  const [first, second] = [options.className?.at(0), options.className?.slice(1)]

  // convert BEM class name to data-testid
  const classId = first && second
    ? first.toUpperCase() + second
      .replace(/-[a-z]/g, (input) => input.at(1)?.toUpperCase() ?? '')
      .replace(/(?<=__)[a-z]/g, (input) => input.toUpperCase())
    : undefined

  return classId
    ? `${filename}__${classId}`
    : filename
}

// use inside eslint flat configs
// keys are the attribute name(s) to manage; each maps to its own build function
export default defineConfigWithVueTs(  
  ...vueDataTestid({
    'data-testid': buildDataTestId
  }).configs.recommended
)

Rules

• vue-data-testid/add - if data-testid is missing, it should be added
• vue-data-testid/unique - attribute should be unique
• vue-data-testid/log - create file dti.log.md which declares a list of file names with its data-testid attributes

Passing multiple keys (e.g. { 'data-testid': buildA, 'data-cy': buildB }) manages several attributes at once — a node is skipped by a given attribute once any of its build functions returns undefined/null, or once a matching attribute already exists on the node.

Example converted node

before

<div class="hello-world"></div>

after

<div
  data-testid="App__HelloWorld"
  class="hello-world"
></div>