reactjs - 无法为测试获取 TreeView 图标和 IconButton

Question

我正在尝试测试具有 aendAdornment IconButton和 other的组件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使用测试游乐场获取图标时

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

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.getByRole('treeitem', { name: /Test1/ }) // Gets you the first `TreeItem`