In my project, I’m using react-testing-library and jest-dom.
I ran into same problem – after some investigation I found solution, based on thread: https://github.com/airbnb/enzyme/issues/400
Notice that the top-level function for render has to be async, as well as individual steps.
There is no need to use focus event in this case, and it will allow to select multiple values.
Also, there has to be async callback inside getSelectItem.
const DOWN_ARROW = { keyCode: 40 };
it('renders and values can be filled then submitted', async () => {
const {
asFragment,
getByLabelText,
getByText,
} = render(<MyComponent />);
( ... )
// the function
const getSelectItem = (getByLabelText, getByText) => async (selectLabel, itemText) => {
fireEvent.keyDown(getByLabelText(selectLabel), DOWN_ARROW);
await waitForElement(() => getByText(itemText));
fireEvent.click(getByText(itemText));
}
// usage
const selectItem = getSelectItem(getByLabelText, getByText);
await selectItem('Label', 'Option');
( ... )
}