How to select an option in MUI select list with jest?

Question

I have a Material UI select component id like to automate tests with jest. Is it possible to select an option within a list selector Material UI component and have the option populate its value confirmably in jest? I am unable to find any reliable method or information on how to do this.

Answer 1

In MUI library all input components have a property called inputProps. This property is forwarded to the html <input /> at the end of the tree. So you can pass a property that identifies the input so you can use it to find and interact with it.

Answer 2

MUI isn't that different.

Have you tried something like this?

import {render, screen, fireEvent} from '@testing-library/react'

test('should pick select option', () => {
  render(<MyCustomMUIComponent />)
  const select = screen.getByLabelText('My Select');
  fireEvent.click(select);
  const option = screen.getByText('First Option');
  fireEvent.click(option);

  // the effect you want to test for
})

Answer 3

This way of doing things worked for me:

test('MUI Select test', async () => {
  const spyOnSelectChange = jest.fn();

  render(<Select defaultValue='option_1_key'
          onChange={spyOnSelectChange}>
            <MenuItem value='option_1_key'>option_1_value</MenuItem>
            <MenuItem value='option_2_key'>option_2_value</MenuItem>
        </Select>)

  // Check current state
  {
    expect(screen.queryByText('option_1_value')).toBeTruthy();
    expect(screen.queryByText('option_2_value')).not.toBeTruthy();
  }

  // Change Selection
  {
    // Note: you need to use the *keys*, not the actual text shown
    const select = screen.getByDisplayValue("option_1_key")
    // no act/await needed (why?)
    fireEvent.change(select, { target: { value: 'option_2_key' } })
  }
  

  // check if onChange was called
  expect(spyOnSelectChange.mock.calls.length).toBe(1);

  // Check new state
  {
    expect(screen.queryByText('option_1_value')).not.toBeTruthy();
    expect(screen.queryByText('option_2_value')).toBeTruthy();
  }
})

Note:

• const select = screen.getByTestId("your_test_id"); wouldn't work.

• Another answer stated you'd need await waitFor(() => {expect(spyOnSelectChange.mock.calls.length).toBe(1);}). I didn't.