Testing material-ui TextField by role using react-testing-library

Question

I have some components which include some mui TextFields, and there are two situations for my components:

1. One TextField is designed for LicenseCode and it can't have a label.

2. Also there are some TextFields that will be created via the map function also I can't use the label for each of them.

So, I can't use getByRole for testing them. To mitigate this in testing I've tried some solutions, But I think there should be a better way. These are my founded solutions:

1. I've disabled eslint and use documentQuerySecletor for that.

  /*eslint-disable */
  const activationCodeInputs = document.querySelectorAll('.codeItem input');
  expect(activationCodeInputs).toHaveLength(5);

  const systemIdTextarea = document.getElementById('systemId');
  expect(systemIdTextarea).not.toBeNull();
  /*eslint-enable */

2. Also, Find an article that used data-testid and passed it to TextField viainputProps

// code
<TextField
 inputProps={{ 'data-testid': 'activationCode' }}
/>

 <TextField
  inputProps={{ 'data-testid': 'systemId' }}
 />

// tests
const activationCodeInputs = screen.getAllByTestId('activationCode');
expect(activationCodeInputs).toHaveLength(5);

const systemIdTextarea = screen.getByTestId('systemId');
expect(systemIdTextarea).toBeInTheDocument();

Since it is just a text field which is a regular element, Do I have to write tests with getByRole only as the doc says the first preferred way, is it?

Answer 1

For Material UI and React Testing I've just used a label on the Textfield and used getByLabelText for testing to get the input with that label

 <TextField
   label="input label"
   variant="outlined"
 />


screen.getByLabelText(/^input label/i)