使用 Jest React Mui 表分页进行测试

Question

我有带分页的基本 MUI 数据表 https://mui.com/material-ui/react-table/。我在下一页中使用了它。当我想在 Jest 中测试更改页面行数范围从 5 到 10 时，单击更改范围按钮不显示弹出菜单。

表格页脚渲染这样的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>

有角色按钮且 tabindex=0 的 div 以及 tabindex=1 的输入。我可以找到这些元素并 fireEvent.click 它们，但它不会在 dom 菜单中生成，我可以在其中选择行号。

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

我在 chrome 开发工具中看到该元素的父 div 有单击事件侦听器，但如果我在该 div 菜单上单击 fireEvent，则事件不会显示。我还看到，当我点击浏览器中的按钮元素时

<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 正在从 false 变为 true，但当我开玩笑地这样做时，它仍然是 false。在浏览器中，我看到在单击更改行数后，此菜单被动态添加为 body 元素的最后一个子元素。问题是 mui 表不使用常规选择，而是在单击按钮后触发附加的弹出菜单。

Answer 1

有点晚了，但对于任何为此苦苦挣扎的人来说，问题实际上是“fireEvent.click”。组合框元素仅适用于“fireEvent.mouseDown”。

这是我的代码：

const paginationSelect = getByRole('combobox');
fireEvent.mouseDown(paginationSelect);

Answer 2

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

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