CODEWITHSUNDEEP
javascriptreactjsjestjsmaterial-uireact-testing-library
SeyyedKhandon
SeyyedKhandon

Reputation: 6093

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

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 */
  1. 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?

Upvotes: 4

Views: 4806

Answers (2)

Johannes Klau&#223;
Johannes Klau&#223;

Reputation: 11020

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.

Upvotes: 3

Richard Hpa
Richard Hpa

Reputation: 2867

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)

Upvotes: 3

Related Questions