我已经成功地实现了 Semantic-UI Dropdown 来显示公司列表。现在我正在尝试为它构建 Jest/React 测试库测试。为了实现这一点，我构建了这个模拟请求：

beforeEach(() => {
  request.get = jest.fn(() => Promise.resolve({
    companies: [
      {"company_id": 1, "company_name": "ABC"},
      {"company_id": 2, "company_name": "DEF"}
    ]
  }));
});

基于我添加到组件代码中的 console.log，这似乎按预期工作。

这是我的此元素实例的一个节略示例：

<div id="companyId" data-testid="companies-dropdown" role="combobox">
  <input autocomplete="companyId" class="search" type="text">
  <div class="default text" "role="alert">Ex. ABC Corp</div>
  <div role="listbox">
    <div role="option"><span class="text">ABC</span></div>
    <div role="option"><span class="text">DEF</span></div>
  </div>
</div>

我正在努力的地方是在我的测试中正确等待下拉列表填充：

it('Should populate the Search and Select Company dropdown with 2 companies', async () => {
  const { getByTestId, getByText, getByRole } = displayModal();
  const listBox = await waitForElement(() => getByRole('listbox'));
});

错误信息是：无法找到角色为“listbox”的可访问元素

我也尝试过这种替代方法，但得到了相同的错误消息：

const listBox = await waitForElement(() => within(getByTestId('companies-dropdown')).getByRole('listbox'));

可能有人知道我做错了什么吗？