Use data- attributes with Material UI and Typescript

user_4927236 0
Viewed 2664

I'm trying to add a data-test-id attribute to a button in React, but Typescript is grumpy about it. How can I add this property to ALL Material components?

import { Button } from '@material-ui/core'

<Button dataTestId='my-test-id'>
  Click Me!
</Button>

Typsescript Error:

TS2769: No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; fullWidth?: boolean; href?: string; size?: "medium" | ... 1 more ... | "small"; startIcon?: ReactNode; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'dataTestId' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; ... 5 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' but required in type '{ component: ElementType<any>; }'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type '{ children: string; endIcon: Element; variant: "text"; style: { textTransform: "lowercase"; }; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; dataTestId: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'dataTestId' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; color?: Color; disabled?: boolean; disableElevation?: boolean; disableFocusRipple?: boolean; endIcon?: ReactNode; ... 4 more ...; variant?: "text" | ... 1 more ... | "contained"; } & { ...; } & CommonProps<...> & Pick<...>'.

So, I basically want to tell typescript that dataTestId should be a valid property on any React component.

cypress typescript reactjs
2 Answers

Have you considered using a data-* attribute for this?

Based on the Typescript documentation:

Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error if it is not found in the element attributes type.

user_81443240

Case doesn't matter for data attributes and usually include a hyphen. And thats exactly how you add a data attribute on the button:

<Button data-testid='my-test-id'>
  Click Me!
</Button>
user_153841030
Related