Beginner on react testing here, any idea/suggestion on what would be good way to achieve this, my data.map gives an array of objects which contains identifiers and names, i would like to test those, if those properties have text content like that. What i did is to use 'role' but then on role it seems we cant use made up names, so how would do this ?

My test:

  test("test clicking ListItem", () => {
    const Items = [{ identifier: "0-0-0-2", name: "Camera 1" }];

    render(
      <Provider store={store}>
        <SelectionList
          classes={{ button_basic: "" }}
          action={"cameras"}
          actionArgs={""}
          onUpdateClick={onClickCallback}
          onDeleteClick={onClickCallback}
          onDetailsClick={onClickCallback}
        />
      </Provider>
    );
    const SelectionCardElement = screen.getAllByRole("mapData");
    expect(SelectionCardElement[0]).toHaveTextContent(Items[0].identifier);
    expect(SelectionCardElement[0]).toHaveTextContent(Items[0].name);
  });

Code:

 const data = currentItem[props.action as keyof typeof currentItem];
  let childList: React.ReactElement | string = "";
  if (data && data.length > 0) {
    childList = (
      <Collapse
        key={itemListCollapseKey}
        in={collapseStates[itemListCollapseKey]}
        unmountOnExit
      >
        {data.map((el: ConnectedSelectionListProps) => (
          <List role="mapData" key={keyFromEl(el) + "sublist"}>
            {console.log("renders: ", el.name, el)}
            {renderListItem(keyFromEl(el), el.name, el)}
          </List>
        ))}
      </Collapse>
    );
  }

List and Collapse comes from "@material-ui/core/"

my childList:

return (
    <List component="div" data-testid="SelectionListt">
      <ListItem
        key={props.action + "-header"}
        button
        onClick={(event) => {
          handleExpandClick(event, itemListCollapseKey);
        }}
      >
        <ListItemAvatar>{renderItemsIcon()}</ListItemAvatar>
        <ListItemText>
          <Trans i18nKey={"selection." + props.action}>{props.action}</Trans>
        </ListItemText>
        {collapseStates[itemListCollapseKey] ? <ExpandLess /> : <ExpandMore />}{" "}
      </ListItem>

      {childList}
    </List>
  );