React Select sporadically failing test when asserting if menu still open

17 Views Asked by At

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?

0

There are 0 best solutions below