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.
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.
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
})