react-select-event
react-select-event copied to clipboard
Need to execute openMenu() before being able to select() an item
Problem
I'm unable to select an option when I'm not running selectEvent.openMenu()
before I select the item with selectEvent.select()
, otherwise I'll get the following error message:
Unable to find an element with the text: test display name 1. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
I believe this is not expected behavior, as the examples in the documentation also do not do this.
Dependencies
- "@testing-library/jest-dom": "^5.16.4"
- "@testing-library/react": "^13.2.0"
- "react-select": "^5.3.2"
- "react-select-event": "^5.5.0"
Code
test('able to select an item', async () => {
const mockFunction = jest.fn();
const fakeOptions = [
{
value: 'test-id',
label: 'test display name 1',
},
{
value: 'test',
label: 'test display name 2',
}
];
render(
<form>
<label htmlFor="characters">Characters</label>
<Select inputId="characters" options={fakeOptions} onChange={mockFunction}/>);
</form>
)
const select = screen.getByLabelText('Characters');
// if you comment the following line out, the test will not pass anymore
selectEvent.openMenu(screen.getByLabelText('Characters'));
await selectEvent.select(select, 'test display name 1');
expect(mockFunction).toHaveBeenCalledWith('test-id');
});