无法获取 TreeView 图标和 IconButton 进行测试

Question

我正在尝试测试一个具有 anendAdornment IconButton和另一个带有 a 的组件TreeView，但是 theIconButton和ExpandIcon/CollapseIcon都没有很好的选项来调度测试事件。

这是TextField我正在使用的组件：

<TextField
  fullWidth
  label="Label"
  onChange={handleChange}
  type="text"
  InputProps={{
    endAdornment: (
        <InputAdornment >
          <IconButton onClick={openAssetHierarchy}>
            <Folder />
          </IconButton>
        </InputAdornment>
      ),
    }}
/>

这是TreeView组件：

<TreeView
  defaultCollapseIcon={<ArrowDropDown />}
  defaultExpandIcon={<ArrowRight />}
  defaultEndIcon={<div style={{ width: 24 }} />}
  onNodeToggle={handleToggle}
  onNodeSelect={handleSelect}
>
  [...]
</TreeView>

对于TextField图标按钮：

用于TreeView使用 Test Playground 获取图标时

没有很好的查询来获取测试图标。我怎样才能获得这些选项？

Answer 1

对于，IconButton您可以aria-label向元素添加一个属性，然后getByLabelText在测试中使用它来访问它。这对于可访问性目的也很有用并推荐。

<IconButton aria-label="add a file" onClick={openAssetHierarchy}>
    <Folder />
</IconButton>

screen.getByLabelText('add a file') // Gets you the `IconButton`

对于这些TreeView项目，我假设您实际上并不需要专门访问该图标，而只需要访问TreeItem以进行测试。getByRole这可以通过传递树项的名称来完成。

screen.getByLabelText('add a file') // Gets you the `IconButton`