Testing Semantic-UI Dropdown: How to wait for it to be populated?

问题

I've successfully implemented the Semantic-UI Dropdown to display a list of companies. Now I'm trying to build Jest / React Testing Library tests for it. To accomplish this, I built this Mock Request:

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

Based on a console.log I added to my component code, this appears to work as expected.

Here's an abridged example of my instance of this element:

<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>

Where I'm struggling is to correctly wait in my test for the Dropdown to get populated:

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

The error message is: Unable to find an accessible element with the role "listbox"

I also tried this alternate approach but got the same error message:

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

Might anyone have any ideas what I'm doing wrong?

来源：https://stackoverflow.com/questions/59024913/testing-semantic-ui-dropdown-how-to-wait-for-it-to-be-populated