How to test Material UI Select Component with React Testing Library

Question

I am using react testing library for component testing. Material UI select options are rendered in a popover. debug does not list the options. How can on click event is fired in case of select options.

Following is my select Component.

import TextField from '@material-ui/core/TextField';
import { MenuItem } from '@material-ui/core';

<TextField
  select
  id="fruit"
  inputProps={{ id: "fruit" }}
  SelectProps={{
    SelectDisplayProps: {
      'data-testid': "fruit"
    }
  }}
  fullWidth
  variant="outlined"
  {...errors}
>
  {options.map(option => (
    <MenuItem key={option[valueFieldName]} value={option[valueFieldName]}>
      {option[labelFieldName]}
    </MenuItem>
  ))}
</TextField>

What query selectors should be used for onclick event.

This is how this field is logged by debug()

    <div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
  <label
    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
    data-shrink="false"
    for="fruit"
    id="fruit-label"
  >
    Action on failure
  </label>
  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl">
    <div
      aria-haspopup="listbox"
      aria-labelledby="fruit-label fruit"
      class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
      data-testid="fruit"
      id="fruit"
      role="button"
      tabindex="0"
    >
      <span></span>
    </div>
    <input name="fruit" type="hidden" value="" />
    <svg
      aria-hidden="true"
      class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
      focusable="false"
      role="presentation"
      viewBox="0 0 24 24"
    >
      <path d="M7 10l5 5 5-5z" />
    </svg>
    <fieldset
      aria-hidden="true"
      class="PrivateNotchedOutline-root-242 MuiOutlinedInput-notchedOutline"
      style="padding-left: 8px;"
    >
      <legend
        class="PrivateNotchedOutline-legend-243"
        style="width: 0.01px;"
      >
        <span></span>
      </legend>
    </fieldset>
  </div>
</div>

I have another field on the same form which is rendered depending on value of this select field.

I would like to test something like this:

const selectField = screen.getByTestId('fruit');
fireEvent.change(selectField, {
    target: { value: 'APPLE' }
});
expect(selectField.value).toBe('APPLE');
expect(anotherField).toBeInTheDocument();

It fails at second expect. What is the proper way of testing such forms?

It might be late but for some devs, I was able to solve by using the mouseDown event see stackoverflow.com/questions/59567234/… — Orville
– Orville, Commented Jun 4, 2020 at 0:03
This answer might help as it points out how to select the list from the document once it pops out — Arturo Mendes
– Arturo Mendes, Commented Jan 19, 2023 at 8:49

Gaby Garro · Accepted Answer · 2020-06-08 23:14:13Z

9

You should pass the data-testid prop to the inputProps like

<TextField
  select
  id="fruit"
  inputProps={{ id: "fruit", 'data-testid': "fruit" }}
  fullWidth
  variant="outlined"
  {...errors}
>

and then you can do

const fruit = getByTestId('fruit');
fireEvent.change(fruit, { target: { value: 'APPLE' } });

answered Jun 8, 2020 at 23:14

Gaby Garro

5966 silver badges13 bronze badges

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

3 Comments

coderHook Over a year ago

Yes, this is the best approach I find also by now as Material UI is a wrapper around the base component select in this case, you have to specify the data-testId through the inputProps.

NotSimon Over a year ago

This worked for me but it feels like it doesn't really test whether the UI works, but rather that the value can be set programmatically.

SalahAdDin Over a year ago

how can we delete data-testid when working with vite?

Collectives™ on Stack Overflow

How to test Material UI Select Component with React Testing Library

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related