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>
);
};
包装纸：
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>;
await screen.findAllByRole("columnheader");let originalWindowResizeObserver: {
new (callback: ResizeObserverCallback): ResizeObserver;
prototype: ResizeObserver;
};
beforeAll(() => {
originalWindowResizeObserver = mockResizeObserver().originalWindowResizeObserver;
});
afterAll(() => (window.ResizeObserver = originalWindowResizeObserver));
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 };
};