title: Testing Semantic-UI Dropdown: How to wait for it to be populated?
body: <p>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:</p>
  
  <pre><code>beforeEach(() =&gt; {
    request.get = jest.fn(() =&gt; Promise.resolve({
      companies: [
        {"company_id": 1, "company_name": "ABC"},
        {"company_id": 2, "company_name": "DEF"}
      ]
    }));
  });
  </code></pre>
  
  <p>Based on a console.log I added to my component code, this appears to work as expected.</p>
  
  <p>Here's an abridged example of my instance of this element:</p>
  
  <pre><code>&lt;div id="companyId" data-testid="companies-dropdown" role="combobox"&gt;
    &lt;input autocomplete="companyId" class="search" type="text"&gt;
    &lt;div class="default text" "role="alert"&gt;Ex. ABC Corp&lt;/div&gt;
    &lt;div role="listbox"&gt;
      &lt;div role="option"&gt;&lt;span class="text"&gt;ABC&lt;/span&gt;&lt;/div&gt;
      &lt;div role="option"&gt;&lt;span class="text"&gt;DEF&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where I'm struggling is to correctly wait in my test for the Dropdown to get populated:</p>
  
  <pre><code>it('Should populate the Search and Select Company dropdown with 2 companies', async () =&gt; {
    const { getByTestId, getByText, getByRole } = displayModal();
    const listBox = await waitForElement(() =&gt; getByRole('listbox'));
  });
  </code></pre>
  
  <p>The error message is: Unable to find an accessible element with the role "listbox"</p>
  
  <p>I also tried this alternate approach but got the same error message:</p>
  
  <pre><code>const listBox = await waitForElement(() =&gt; within(getByTestId('companies-dropdown')).getByRole('listbox'));
  </code></pre>
  
  <p>Might anyone have any ideas what I'm doing wrong?</p>