测试Semantic-UI下拉列表:如何等待它填充? [英] Testing Semantic-UI Dropdown: How to wait for it to be populated?

问题描述

我已经成功实现了Semantic-UI Dropdown以显示公司列表.现在，我正在尝试为其构建Jest/React测试库测试.为此，我建立了这个模拟请求:

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"}
    ]
  }));
});

基于我添加到组件代码中的console.log，这似乎可以正常工作.

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?

推荐答案

我在搜索其他内容时碰巧看到了这个.但是在您的情况下，您使用的角色不正确.我通过以下方法实现了用例:

I happened to see this while I was searching something else. But in your case, you are using wrong role. I achieved my use case with the following:

• 首先聚焦div的输入元素以打开下拉菜单.我使用输入元素:
  • userEvent.click(getByLabelText('Company'))
  • 可以使用data-testid或使用角色'combobox'
  替换上面的内容
  • First focus the input element of the div to open dropdown. I use the input element:
    • userEvent.click(getByLabelText('Company'))
    • The above can be replaced by using data-testid or with role 'combobox'
    • getAllByRole('option')

    const companyAbc = getAllByRole('option').find(ele => ele.textContent === 'ABC') userEvent.click(companyAbc); // verify your onChange event

    在您的异步情况下:

    const companyAbc = await findAllByRole('option').find(ele => ele.textContent === 'ABC') userEvent.click(companyAbc); // verify your onChange event

    SemanticReact还具有onSearchChange事件，如果是用例，您可以使用该事件来触发每个输入搜索.

    SemanticReact also has onSearchChange event that you can use to trigger for every input search if that's the use case.

    这篇关于测试Semantic-UI下拉列表:如何等待它填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！