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?

Answer 1

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' } });