How do I add typescript support for my custom data-testid attribute?

[colinblaise]

I'm using playwright for my E2E tests and I'm decorating my components with data-testid attributes to target them.

Instead of hardcoding a value for data-testid in both my components and in the tests, I'd prefer to have a type that contains all of the valid data-testid values.

e.g.

type DataTestId = 'submit-btn' | 'next-page-btn' | ... etc

Doing this forces me to keep the type up to date, and in my tests I'll be able to create a helper function to easily target my ids.

e.g.

function clickButtonByTestId(id: DataTestId)

I've tried extending my vue.d.ts file but nothing seems to be working. I also can't find any exiting docs on what interfaces to extend to accomplish this.

[colinblaise]

I was able to get the typescript enforcement working with the following code in a shims-tsx.d.ts file.

type test = "hello" | "world";

declare module "@vue/runtime-dom" {
  interface HTMLAttributes {
    "data-testid"?: test;
  }
}

export {};

This code was provided to me by claude.ai after a few rounds of discussion.

The only problem I'm still trying to solve is I'm not receiving any autocomplete syntax in the template when I start specifying a value for data-testid.

[colinblaise]

Actually, this only worked for native elements, such as li, input, div, etc.

It does not work on custom components