Trying to write a test to assert that the menu is still open after selecting an option
It is sporadically passing so I stripped it down to the below
<AsyncReactSelect
loadOptions={loadoptions}
placeholder="something something"
defaultOptions
isMulti
/>
const loadoptions = async () => {
return [
{ label: "Banana", value: "Banana" },
{ label: "Grape", value: "Grape" },
{ label: "Apple", value: "Apple" },
{ label: "Lemon", value: "Lemon" },
]
}
then in my test
await act(async () => {
const selectDropdown = screen.getAllByRole("combobox")[0]
userEvent.click(selectDropdown)
userEvent.type(selectDropdown, "{enter}")
const option = await waitFor(() => screen.getByText("Lemon"))
fireEvent.click(option)
})
expect(screen.getAllByLabelText("Remove Lemon").length).toBe(1)
expect(screen.getByText("Banana")).toBeInTheDocument()
expect(screen.getByText("Grape")).toBeInTheDocument()
expect(screen.getByText("Apple")).toBeInTheDocument()
Why would this still be failing? I thought initially it was in my wrapper component for AsyncSelect but now I've stripped it down to react select async component and this test sometimes passes and sometimes fails
any ideas?