Can't get TreeView Icons and IconButton for Tests

user_3761292 0
Viewed 1447

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: textField icon button

For TreeView when using Testing Playground to get the icon treeView icon test

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

testing-library material-ui react-testing-library reactjs
1 Answers

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`
user_18707800
Related