Principiante en las pruebas de reacción aquí, cualquier idea/sugerencia sobre cuál sería una buena manera de lograr esto, mi mapa de datos proporciona una matriz de objetos que contienen identificadores y nombres, me gustaría probarlos, si esas propiedades tienen contenido de texto como ese . Lo que hice fue usar 'rol' pero luego en el rol parece que no podemos usar nombres inventados, entonces, ¿cómo haría esto?

Mi prueba:

 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); });

Código:

 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 proviene de "@material-ui/core/"

mi lista de niños:

 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> );