Can't get TreeView Icons and IconButton for Tests

Question

I'm trying to test a component that has an endAdornment IconButton and other with a TreeView, but neither the IconButton and the ExpandIcon/CollapseIcon have good options to dispatch test events.

This is the TextField component that I'm using:

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

This is the TreeView component:

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

For the TextField icon button:

For TreeView when using Testing Playground to get the icon

There aren't good queries to get the icons for tests. How can I get these options?

Answer 1

For the IconButton you can add an aria-label attribute to the element, then use getByLabelText to access it in your test. This is also useful and recommended for accessibility purposes.

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

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

---

For the TreeView items, I assume you don't actually need to access the icon specifically but simply need to access the TreeItem for testing purposes. This can be done with getByRole and passing the tree item's name.

screen.getByRole('treeitem', { name: /Test1/ }) // Gets you the first `TreeItem`