reactjs - 使用反应测试库测试语义 ui 下拉列表
问题描述
这是我的功能:我使用了“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)
})
我的测试用例:
解决方案
使用 inside(component).getAllByRole('option') 解决了我的问题链接供参考:https ://testing-library.com/docs/dom-testing-library/api-within/
推荐阅读
- regex - 如何使用 grep 查找 3 位数字且仅 3 位数字?
- docker - 使 NFS 共享在 Openstack 上运行的 Kubernetes pod 中可见
- php - Laravel Horizon 队列处理,但未收到预期结果
- python - Windows 10 - python pip 不工作(添加了环境变量)
- html - 有没有办法只拆分一些标签垂直分成两列?
- karate - $符号在空手道框架中有什么用?
- python - 张量流模型到 Numpy
- google-apps-script - 我想使用标题值(列名)而不是列号对电子表格进行排序
- c# - 使用 jQuery ajax 函数提交表单问题?
- mocking - Mockery/PhpUnit:测试成功但错误