@mui/x-data-grid + RTL + Jest не отображает заголовок и тело таблицы
В настоящее время я пытаюсь проверить, будет ли моя сетка данных отображать сообщение «Нет строк», когда я передаю ей пустой массив, но, к сожалению, это, похоже, не работает.
Мой тестовый файл: (я высмеиваю хук, используемый в тестируемом компоненте):
jest.mock<DefaultExport<() => { arrayData: any[] }>>("./hooks/useListComponent.ts", () => ({
default: () => ({
arrayData: [],
}),
}));
И вот моя тестовая логика:
it("should work when arrayData is empty array", async () => {
const { baseElement } = renderWithTheme(<ListComponent />);
expect(baseElement).toMatchSnapshot(); // the output is below
});
});
Тестируемый компонент:
const ListComponent = () => {
const { arrayData } = useListComponent();
const tableColumns: GridColDef[] = [
{
field: "actions",
type: "actions",
getActions: () => [
<GridActionsCellItem icon={<DeleteIcon />} onClick={() => () => {}} label="Delete" showInMenu />,
<GridActionsCellItem icon={<EditIcon />} onClick={() => {}} label="Edit" showInMenu />,
],
width: 50,
},
{
field: "fieldName",
headerName: "some header name (I have about 10 of those objects, not putting them here for brevity)",
width: 125,
}
];
return (
<Box
sx={{
height: "90vh",
width: "100%",
}}
>
<DataGrid
getRowId={(row: Alert) => row.someId}
loading={!arrayData}
columns={arrayData}
rows={arrayData || []}
slots={{
toolbar: GridToolbar,
}}
slotProps={{
toolbar: {
showQuickFilter: true,
quickFilterProps: { debounceMs: 500 },
},
}}
disableRowSelectionOnClick
/>
</Box>
);
};
The
renderWithThemeобертка:
export const renderWithTheme = (ui: ReactElement) => ({
...render(ui, {
wrapper: ({ children }) => {
return <ThemeProvider theme={createTheme()}>{children}</ThemeProvider>;
},
}),
});
Вывод моментального снимка :
// Jest Snapshot v1
exports[`ListComponent should work when arrayData is empty array 1`] = `
<body>
<div>
<div
class="MuiBox-root css-v0ngl"
>
<div
aria-colcount="13"
aria-multiselectable="false"
aria-rowcount="2"
class="MuiDataGrid-root MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-6h1dhi-MuiDataGrid-root"
role="grid"
>
<div
class="MuiDataGrid-main css-204u17-MuiDataGrid-main"
>
<div
class="MuiDataGrid-columnHeaders MuiDataGrid-withBorderColor css-1iyq7zh-MuiDataGrid-columnHeaders"
style="min-height: 56px; max-height: 56px; line-height: 56px;"
>
<div
class="MuiDataGrid-columnHeadersInner css-gl260s-MuiDataGrid-columnHeadersInner"
role="rowgroup"
/>
</div>
</div>
<div
class="MuiDataGrid-footerContainer MuiDataGrid-withBorderColor css-wop1k0-MuiDataGrid-footerContainer"
>
<div />
<div
class="MuiTablePagination-root css-rtrcn9-MuiTablePagination-root"
>
<div
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar css-78c6dr-MuiToolbar-root-MuiTablePagination-toolbar"
>
<div
class="MuiTablePagination-spacer css-1psng7p-MuiTablePagination-spacer"
/>
<p
class="MuiTablePagination-selectLabel css-pdct74-MuiTablePagination-selectLabel"
id=":r1:"
>
Rows per page:
</p>
<div
class="MuiInputBase-root MuiInputBase-colorPrimary css-16c50h-MuiInputBase-root-MuiTablePagination-select"
>
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r1: :r0:"
class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input css-194a1fa-MuiSelect-select-MuiInputBase-input"
id=":r0:"
role="button"
tabindex="0"
>
100
</div>
<input
aria-hidden="true"
aria-invalid="false"
class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
tabindex="-1"
value="100"
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard css-pqjvzy-MuiSvgIcon-root-MuiSelect-icon"
data-testid="ArrowDropDownIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</div>
<p
class="MuiTablePagination-displayedRows css-levciy-MuiTablePagination-displayedRows"
>
1–1 of 1
</p>
<div
class="MuiTablePagination-actions"
>
<button
aria-label="Go to previous page"
class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
disabled=""
tabindex="-1"
title="Go to previous page"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="KeyboardArrowLeftIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
/>
</svg>
</button>
<button
aria-label="Go to next page"
class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-colorInherit MuiIconButton-sizeMedium css-zylse7-MuiButtonBase-root-MuiIconButton-root"
disabled=""
tabindex="-1"
title="Go to next page"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="KeyboardArrowRightIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>;
Заранее спасибо за ваше время, пытаясь помочь мне!
1 ответ
Мне удалось решить проблему с помощью следующих шагов (прошло некоторое время с тех пор, как у меня возникла эта проблема, и я не уверен, нужны ли они вам все, но все равно перечислю их, потому что они могут кому-то помочь):
- После рендеринга DataGrid вам может потребоваться
await screen.findAllByRole("columnheader");прежде чем продолжить оставшуюся часть теста (не могу точно вспомнить, требуется ли этот тест, потому что даже если я удалю его в некоторых тестах, они все равно пройдут) - Без этого мои тесты не проходят:
let originalWindowResizeObserver: {
new (callback: ResizeObserverCallback): ResizeObserver;
prototype: ResizeObserver;
};
beforeAll(() => {
originalWindowResizeObserver = mockResizeObserver().originalWindowResizeObserver;
});
afterAll(() => (window.ResizeObserver = originalWindowResizeObserver));
Вышеуказанное находится в файле теста. У нас также есть testUtils, где у нас есть:
export const mockResizeObserver = () => {
const originalWindowResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver {
constructor(private callback: any) {
this.callback = callback;
}
observe(target: Element) {
setTimeout(() => this.callback([{ target }]), 0);
}
unobserve() {}
disconnect() {}
};
return { originalWindowResizeObserver };
};
- У нас также есть оболочка DataGrid:
const CustomDataGrid: React.FC<DataGridProps> = (props) => (
<DataGrid
{...{
sx: {
// any common styles if you need them
},
disableVirtualization: isTestEnvironment ? true : undefined, // the tests fail without this one
getRowHeight: isTestEnvironment ? undefined : () => "auto", // you may not need this one
onProcessRowUpdateError: isTestEnvironment ? () => {} : undefined, // you may not need this one either, we just got table validations and for some reason we're having a console error (only while running tests) and this removes it
...props,
}}
/>
);