使用反应测试库测试语义 ui 下拉列表

Question

这是我的 function：我使用了“semantic-ui”的下拉菜单，我是新手。 我已经编写了测试用例，但在访问角色时遇到了问题

 import React from 'react'
import constants from '../../constants'

import { Label, Dropdown } from '../../utils/sdkWrapper'

export const componentTestId = 'SelectorNetwork'

export default function SelectorNetwork(props) {
  const { selectedNetwork, disabled, onChange } = props

  const _onChange = (e, data) => onChange && onChange(data.value)

  const { choices, label } = constants.SelectorNetwork

  let options = []

  choices.forEach((networkChoice) => {
    options.push({
      key: networkChoice.value,
      text: networkChoice.label,
      value: networkChoice.value,
    })
  })
  return (
    <div data-testid={componentTestId}>
      <Label text={label} />

      <Dropdown
        onChange={_onChange}
        selection
        value={selectedNetwork}
        options={options}
        disabled={disabled}
      />
    </div>
  )
}

我已经编写了测试用例，但在从下拉列表中获取选项时遇到了问题：

 TestingLibraryElementError: Unable to find an accessible element with the role "[object HTMLDivElement]"

Here are the accessible roles:

  listbox:

  Name "":
  <div
    aria-expanded="false"
    class="ui selection dropdown"
    data-testid="Dropdown"
    role="listbox"
    tabindex="0"
  />

  --------------------------------------------------
  alert:

  Name "":
  <div
    aria-atomic="true"
    aria-live="polite"
    class="divider text"
    role="alert"
  />

  --------------------------------------------------
  option:

  Name "Internet":
  <div
    aria-checked="true"
    aria-selected="true"
    class="active selected item"
    role="option"
    style="pointer-events: all;"
  />

  Name "IPX":
  <div
    aria-checked="false"
    aria-selected="false"
    class="item"
    role="option"
    style="pointer-events: all;"
  />

  --------------------------------------------------

<body>
  <div>
    <div
      data-testid="SelectorNetwork"
    >
      <label
        class="labelField"
        data-testid="Label"
      >
        Network
      </label>
      <div
        aria-expanded="false"
        class="ui selection dropdown"
        data-testid="Dropdown"
        role="listbox"
        tabindex="0"
      >
        <div
          aria-atomic="true"
          aria-live="polite"
          class="divider text"
          role="alert"
        >
          Internet
        </div>
        <i
          aria-hidden="true"
          class="dropdown icon"
        />
        <div
          class="menu transition"
        >
          <div
            aria-checked="true"
            aria-selected="true"
            class="active selected item"
            role="option"
            style="pointer-events: all;"
          >
            <span
              class="text"
            >
              Internet
            </span>
          </div>
          <div
            aria-checked="false"
            aria-selected="false"
            class="item"
            role="option"
            style="pointer-events: all;"
          >
            <span
              class="text"
            >
              IPX
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

任何人都可以在这里帮助我吗？ 我是新反应，请解释这个错误是什么意思？ 我有可访问的角色作为选项我仍然可以访问它为什么？？？

 test('dropdown', () => {
    const onChange = jest.fn()
    const selectedNetwork = 'Internet'
    const { getByTestId, getAllByRole } = render(
      <SelectorNetwork selectedNetwork={selectedNetwork} onChange={onChange} />,
    )

    const component = getByTestId(componentTestId)

    console.log(component.children[0].textContent)
    console.log(component.children[1].textContent)
    fireEvent.click(component)

    const dropdownOptions = getAllByRole(component, 'option')
    console.log(dropdownOptions[0].textContent)
    console.log(dropdownOptions[1].textContent)
    fireEvent.click(dropdownOptions[1])

    expect(dropdownOptions[0].textContent).toBe(options[1].text)

    console.log(dropdownOptions[0].textContent)
  })

我的测试用例：

Answer 1

使用 inside(component).getAllByRole('option') 解决了我的问题链接供参考： https://testing-library.com/docs/dom-testing-library/api-within/