无法获取用于测试的 TreeView 图标和 IconButton

Question

我正在尝试测试具有 endAdornment IconButton 和其他具有 TreeView 的组件，但 IconButton 和 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 使用 Testing 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.getByRole('treeitem', { name: /Test1/ }) // Gets you the first `TreeItem`

无法获取用于测试的 TreeView 图标和 IconButton

Can't get TreeView Icons and IconButton for Tests

reactjs

material-ui

react-testing-library

testing-library