title: How to test Material UI Select Component with React Testing Library
body: <p>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.</p>
  
  <p>Following is my select Component.</p>
  
  <pre><code>import TextField from '@material-ui/core/TextField';
  import { MenuItem } from '@material-ui/core';
  
  &lt;TextField
    select
    id="fruit"
    inputProps={{ id: "fruit" }}
    SelectProps={{
      SelectDisplayProps: {
        'data-testid': "fruit"
      }
    }}
    fullWidth
    variant="outlined"
    {...errors}
  &gt;
    {options.map(option =&gt; (
      &lt;MenuItem key={option[valueFieldName]} value={option[valueFieldName]}&gt;
        {option[labelFieldName]}
      &lt;/MenuItem&gt;
    ))}
  &lt;/TextField&gt;
  </code></pre>
  
  <p>What query selectors should be used for onclick event.</p>
  
  <p>This is how this field is logged by debug()</p>
  
  <pre><code>    &lt;div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"&gt;
    &lt;label
      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
      data-shrink="false"
      for="fruit"
      id="fruit-label"
    &gt;
      Action on failure
    &lt;/label&gt;
    &lt;div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"&gt;
      &lt;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"
      &gt;
        &lt;span&gt;​&lt;/span&gt;
      &lt;/div&gt;
      &lt;input name="fruit" type="hidden" value="" /&gt;
      &lt;svg
        aria-hidden="true"
        class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
        focusable="false"
        role="presentation"
        viewBox="0 0 24 24"
      &gt;
        &lt;path d="M7 10l5 5 5-5z" /&gt;
      &lt;/svg&gt;
      &lt;fieldset
        aria-hidden="true"
        class="PrivateNotchedOutline-root-242 MuiOutlinedInput-notchedOutline"
        style="padding-left: 8px;"
      &gt;
        &lt;legend
          class="PrivateNotchedOutline-legend-243"
          style="width: 0.01px;"
        &gt;
          &lt;span&gt;​&lt;/span&gt;
        &lt;/legend&gt;
      &lt;/fieldset&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have another field on the same form which is rendered depending on value of this select field.</p>
  
  <p>I would like to test something like this:</p>
  
  <pre><code>const selectField = screen.getByTestId('fruit');
  fireEvent.change(selectField, {
      target: { value: 'APPLE' }
  });
  expect(selectField.value).toBe('APPLE');
  expect(anotherField).toBeInTheDocument();
  </code></pre>
  
  <p>It fails at second expect. 
  What is the proper way of testing such forms?     </p>