React Select 在测试中没有保持下拉菜单打开，但它在浏览器中

Question

我有这个：

<AsyncReactSelect
    defaultOptions
    loadOptions={async () => [
      { value: "Pear", label: "Pear" },
      { value: "Banana", label: "Banana" },
      { value: "Raspberry", label: "Raspberry" },
    ]}
    closeMenuOnSelect={false}
    isMulti
  />

这正如我所期望的那样。即选择了 Pear 并且下拉菜单保持打开状态

在我的测试中我有

await act(async () => {
  // open the dropdown
  const selectDropdown = screen.getAllByRole("combobox")[0]
  await userEvent.click(selectDropdown)

  await screen.findByText("Pear")
  screen.debug() // first debug
  await userEvent.type(selectDropdown, "{enter}")

  screen.debug() // second debug
})

在第一次调试中，我清楚地看到列表中的所有下拉选项

但在第二个中，我永远看不到它们，我也不知道为什么。我也尝试过

fireEvent.click

，因为我不确定点击功能中是否发生了奇怪的事情。

知道如何解决这个问题吗？

Answer 1

可能是因为这部分才发生这种情况。

试试这个：

await act(async () => {
  // open the dropdown
  const selectDropdown = screen.getAllByRole("combobox")[0]
  await userEvent.click(selectDropdown)

  await screen.findByText("Pear")
  screen.debug() // first debug
  // await userEvent.type(selectDropdown, "{enter}")
  userEvent.keyboard("{enter}");

  screen.debug() // second debug
})

进一步阅读这里