Material-ui: Cannot set data-testid into TextField after upgrading to Typescript 3.8.2

[bobysf12]

I cannot do this anymore after upgrading Typescript to 3.8.2:

<TextField data-testid="usernameInput" />

The app fails to build:

Types of property 'data-testid' are incompatible.
Type 'string' is not assignable to type 'undefined'.

It used to work with Typescript 3.7.x

@material-ui/core version 4.9.4

[eps1lon]

@bobysf12 Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[akharkhonov]

@b1f6c1c4 this can help you

<TextField inputProps={{"data-testid":"usernameInput"}} />

[embeddedt]

As far as I know, TypeScript 3.8 introduced some breaking changes with regards to unions (which I wouldn't doubt Material-UI makes extensive use of). Considering that the data-testid property wouldn't be part of any built-in union, it's possible that adding extra props like this is no longer allowed.

Have a look at https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta (breaking changes are listed near the bottom of the article).

[bobysf12]

@bobysf12 Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

Hi @eps1lon ! Thank you for your response! I tried to make an example from the codesandbox link that you provided but unfortunately I couldn't reproduce the problem there.

[bobysf12]

@b1f6c1c4 this can help you

<TextField inputProps={{"data-testid":"usernameInput"}} />

That works, but it only works on the input field. Whereas I also need to get the label and helper text.
The reason I pass data-testid to TextField component directly is because I can easily get input, label, and helper text by doing this:

export function getMaterialUITextFieldByTestId(element: HTMLElement) {
    return {
        getInput: () => element.querySelector("input"),
        getLabel: () => element.querySelector("label"),
        getHelperText: () => element.querySelector("p"),
    };
}

// LoginForm.spec.tsx
const {getByTestId} = render(<LoginForm />);
const usernameInput = getMaterialUITextFieldByTestId(getByTestId("usernameInput"));
expect(usernameInput.getHelperText()).toBeNull();

[eps1lon]

@bobysf12

const { container, getByRole } = render(<TextField label="name" helperText="your first name" />)
const input = getByRole('textbox');
const label = container.querySelector(`[for="${input.id}"]`);
const helperText = container.querySelector(`[id="${input.getAttribute('aria-describedby')}"]`);

I can reproduce the issue though with <TextField data-testid="asd" /> and [email protected].

[bobysf12]

This problem is not reproducible anymore with [email protected]
Thank you @eps1lon for your response! I think I can close this for now.