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:

One TextField is designed for LicenseCode and it can't have a label.
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:

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 */

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?

What is your question?

Johannes Klauß
– Johannes Klauß

2021-06-28 21:13:52 +00:00
Commented Jun 28, 2021 at 21:13 — Johannes Klauß
– Johannes Klauß, Commented Jun 28, 2021 at 21:13
@JohannesKlauß , You are right, I've updated it

SeyyedKhandon
– SeyyedKhandon

2021-06-29 03:37:22 +00:00
Commented Jun 29, 2021 at 3:37 — SeyyedKhandon
– SeyyedKhandon, Commented Jun 29, 2021 at 3:37

Richard Hpa · Accepted Answer · 2021-06-29 03:43:24Z

3

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)

answered Jun 29, 2021 at 3:43

Richard Hpa

2,90717 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SeyyedKhandon Over a year ago

In my case the first restriction is not to use label.

Richard Hpa Over a year ago

is there multiple textFields on the component you are testing?

SeyyedKhandon Over a year ago

Yes, I put some example in the question

Johannes Klauß · Accepted Answer · 2021-06-29 06:52:44Z

3

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 component 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.

answered Jun 29, 2021 at 6:52

Johannes Klauß

11.1k18 gold badges73 silver badges127 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related