Testing with Jest React Mui table pagination

Question

I have basic MUI data table with pagination https://mui.com/material-ui/react-table/. I used it in NEXT page. When I want to test in Jest changing page rows number range from 5 to 10 clicking change range button don't show pop up menu.

Table footer render such html.

<div class="MuiTablePagination-root css-jtlhu6-MuiTablePagination-root" data-testid="tablePagination" style="display: block;">
 <div class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar css-78c6dr-MuiToolbar-root-MuiTablePagination-toolbar">
  <div class="MuiTablePagination-spacer css-1psng7p-MuiTablePagination-spacer"></div>
  <p class="MuiTablePagination-selectLabel css-pdct74-MuiTablePagination-selectLabel" id=":r7:">Rows per page:</p>
  <div class="MuiInputBase-root MuiInputBase-colorPrimary Mui-focused css-16c50h-MuiInputBase-root-MuiTablePagination-select">
   <div tabindex="0" role="button" aria-expanded="true" aria-haspopup="listbox" aria-labelledby=":r7: :r6:" id=":r6:" class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input css-194a1fa-MuiSelect-select-MuiInputBase-input">5</div>
   <input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput" value="5"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard MuiSelect-iconOpen css-1mf6u8l-MuiSvgIcon-root-MuiSelect-icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowDropDownIcon">
   <path d="M7 10l5 5 5-5z"></path></svg></div><p class="MuiTablePagination-displayedRows css-levciy-MuiTablePagination-displayedRows">1–5 of 6</p><div class="MuiTablePagination-actions"> 
    <button class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root" tabindex="-1" type="button" disabled="" aria-label="Go to previous page" title="Go to previous page">
     <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowLeftIcon"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path></svg>
   </button>
   <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root" tabindex="0" type="button" aria-label="Go to next page" title="Go to next page">
    <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="KeyboardArrowRightIcon"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg>
    <span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span>
   </button>
  </div>
 </div>
</div>

There is div with role button and tabindex=0 as well as input with tabindex=1. I can find those elements and fireEvent.click on them but it don't generate in dom menu on which I can choose row numbers.

<div role="presentation" class="MuiPopover-root MuiMenu-root MuiModal-root css-10nakn3-MuiModal-root-MuiPopover-root-MuiMenu-root" id="menu-">
 <div aria-hidden="true" class="MuiBackdrop-root MuiBackdrop-invisible css-g3hgs1-MuiBackdrop-root-MuiModal-backdrop" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"></div> 
 <div tabindex="0" data-testid="sentinelStart"></div>
 <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiPaper-root MuiMenu-paper MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation8 MuiPopover-paper css-1poimk-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper" tabindex="-1" style="opacity: 1; transform: none; min-width: 48px; transition: opacity 242ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 161ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; top: 600px; left: 452px; transform-origin: 24px 53.6625px;">
  <ul class="MuiList-root MuiList-padding MuiMenu-list css-6hp17o-MuiList-root-MuiMenu-list" role="listbox" tabindex="-1" aria-labelledby=":r7:">
   <li class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiTablePagination-menuItem css-10by3a5-MuiButtonBase-root-MuiMenuItem-root-MuiTablePagination-menuItem" tabindex="0" role="option" aria-selected="true" data-value="5">5<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></li>
   <li class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiTablePagination-menuItem css-10by3a5-MuiButtonBase-root-MuiMenuItem-root-MuiTablePagination-menuItem" tabindex="-1" role="option" aria-selected="false" data-value="10">10<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></li>
   <li class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiTablePagination-menuItem css-10by3a5-MuiButtonBase-root-MuiMenuItem-root-MuiTablePagination-menuItem" tabindex="-1" role="option" aria-selected="false" data-value="25">25<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></li>
  </ul>
 </div>
<div tabindex="0" data-testid="sentinelEnd"></div>
</div>

I see in chrome dev tools that parent div of this element have click event listener but event if I fireEvent click on this div menu don't show. Also I see that when I click as I think button element in browser

<div tabindex="0" role="button" aria-expanded="true" aria-haspopup="listbox" aria-labelledby=":r7: :r6:" id=":r6:" class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input css-194a1fa-MuiSelect-select-MuiInputBase-input">5</div>

aria-expanded is changing from false to true but when I do it in jest it stays false. In browser I see that this menu is added as last child of body element dynamically after I click change rows number. The problem is that mui table don't use there regualr select but firing addidiotnal pop over menu after click button.

Answer 1

import userEvent from '@testing-library/user-event';

await userEvent.click(screen.getByRole('button', { name: /5/ }));