Unable to set "data-testid" on the inner input of a Checkbox component.

[DanMaycock]

• [X ] The issue is present in the latest release.
• [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

It isn't possible to add a "data-testid" on the inner input element for a Checkbox component via inputProps when using typescript 3.8.3. It gives the typescript error "Type '{ 'data-testid': string; }' is not assignable to type 'InputHTMLAttributes'."

Expected Behavior 🤔

The data-testid attribute is set on the inner input element in the same way as for TextField components.

Steps to Reproduce 🕹

Create a Checkbox component which sets inputProps including a data-testid with.:

<Checkbox inputProps={{ "data-testid": "test-checkbox" }} />

See Codesandbox example

Your Environment 🌎

Tech	Version
Material-UI	v4.9.5
React	v3.16.13
TypeScript	v 3.8.3

[eps1lon]

This is currently a limitation of typescript. We're waiting for microsoft/TypeScript#28960.

For more context see #18902.

Possible workarounds:

• @ts-ignore:

  <Checkbox
    inputProps={{
      // @ts-ignore
      'data-testid': 'test-checkbox',
    }}
  />;

• use ByRole instead of ByTestid. We generally don't recommend data-testid. Most of the (interactions) tests can be implemented using ByRole.

[oliviertassinari]

As a side note, it's reproducible without Material-UI: https://codesandbox.io/s/material-demo-forked-7gfgi?file=/demo.tsx.

import * as React from "react";

interface Props {
  foo: React.InputHTMLAttributes<HTMLInputElement>;
}

function MyComponent(props: Props) {
  return <input {...props.foo} />;
}

export default function Switches() {
  return (
    <div>
      <MyComponent foo={{ "data-testid": "test-text-field" }} />
    </div>
  );
}

It's also worth mentioning that it's not an issue with the InputBase because of the custom type:

https://github.com/mui-org/material-ui/blob/0ff48309f5429dfed1cfef2c08d8a5d8fce70345/packages/material-ui/src/InputBase/InputBase.d.ts#L236-L240