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

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?

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

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?

• javascript
• reactjs
• jestjs
• material-ui
• react-testing-library

• 1 What is your question? – Johannes Klauß Commented Jun 28, 2021 at 21:13
• @JohannesKlauß , You are right, I've updated it – SeyyedKhandon Commented Jun 29, 2021 at 3:37

2 Answers 2

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)

If you don't have a label associated to the TextField and there are multiple TextFields rendered in a list, using and querying via a testid is just fine.

If you have trouble finding the best selector you can always use screen.logTestingPlaygroundURL() after you rendered your ponent in a test. This will give you a URL to the testing library playground where you can check the best selectors for your rendered elements.