I am introducing tests into my project and the thing I've encountered is that when I test the whole page component MUI X Data Grid table gives a wall of errors making it almost impossible to understand what is exactly wrong.
As I understand it, it has something to do with my table being resized in useEffect. Also I have set some autosize props and if I comment out these props and the useEffect the red wall goes away during tests. How do I fix this?
I tried wrapping render method in await waitFor which makes errors go away but I don't think it's the right way to do it since my IDE shows me this: "Avoid using side effects within waitFor callback"
MUI version: "@mui/material": "^5.15.21", "@mui/x-data-grid": "^7.8.0",
Here's the table component:
import { DataGrid, useGridApiRef } from "@mui/x-data-grid";
import { ruRU } from "@mui/x-data-grid/locales";
import { rowsPerPage } from "constants/constants";
import { useDetailsCard } from "hooks/useDetailsCard";
import { useGetTableData } from "hooks/useGetTableData";
import { useSelectedItemsCard } from "hooks/useSelectedItemsCard";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { OrderTableStyles } from "./ContentTableBodyStyles";
const ContentTableBody = ({ paginationModel, handlePagination }) => {
const { i18n } = useTranslation();
const { isFetching, data, dataItem, columns, isInvoices } = useGetTableData();
const apiRef = useGridApiRef();
const { openDetailsCard, closeDetailsCard, setOrderId } = useDetailsCard();
const {
openSelectedCard,
setDeliveriesToExport,
closeSelectedCard,
rowSelectionModel,
setRowSelectionModel,
} = useSelectedItemsCard(apiRef);
const openOrderCard = ({ id }) => {
setOrderId(id - 1);
openDetailsCard();
};
const handlePageSize = ({ pageSize, page }) => {
handlePagination({
page: paginationModel.pageSize !== pageSize ? 0 : page,
pageSize: pageSize,
});
};
const handleRowSelection = (rowIds) => {
setRowSelectionModel(rowIds);
if (isInvoices) return;
const deliveryIds = rowIds
.filter((rowId) => data.results[rowId - 1].deliveries.length)
.map((rowId) => data.results[rowId - 1].deliveries[0].deliveryId);
setDeliveriesToExport(deliveryIds);
if (rowIds.length) {
openDetailsCard();
openSelectedCard();
}
if (!rowIds.length) {
closeSelectedCard();
}
};
useEffect(() => {
closeDetailsCard();
}, [closeDetailsCard]);
useEffect(() => {
if (!isFetching) {
apiRef.current.autosizeColumns({
includeHeaders: true,
includeOutliers: true,
});
}
}, [isFetching, apiRef]);
const rows = data?.results.map((item, index) => dataItem(item, index)) || [];
return (
<DataGrid
autosizeOptions={{
includeOutliers: true,
includeHeaders: true,
}}
autosizeOnMount
autoHeight
checkboxSelection
disableRowSelectionOnClick
disableColumnMenu
disableColumnResize
rowCount={data?.count || 0}
paginationMode="server"
columnHeaderHeight={40}
rows={rows}
loading={isFetching}
apiRef={apiRef}
columns={columns}
getRowHeight={() => "auto"}
pageSizeOptions={rowsPerPage}
onRowClick={openOrderCard}
sortingOrder={["desc", "asc", null]}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 10 },
},
}}
paginationModel={paginationModel}
onPaginationModelChange={handlePageSize}
onRowSelectionModelChange={handleRowSelection}
rowSelectionModel={rowSelectionModel}
sx={OrderTableStyles}
localeText={
i18n.language === "ru"
? ruRUponents.MuiDataGrid.defaultProps.localeText
: null
}
/>
);
};
export default ContentTableBody;
And here's a snippet of the error since all of it doesn't fit in the terminal:
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:56:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
console.error
Warning: An update to ForwardRef(DataGrid) inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:79:20
at setDimensions (node_modules/@mui/utils/node/useEventCallback/useEventCallback.js:25:18)
at Object.call [as current] (node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:200:5)
at EventManager.apply (node_modules/@mui/x-data-grid/node/hooks/utils/useGridApiEventHandler.js:43:11)
at EventManager.emit (node_modules/@mui/x-data-grid/node/utils/EventManager.js:57:18)
at Object.publishEvent (node_modules/@mui/x-data-grid/node/hooks/core/useGridApiInitialization.js:97:40)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:57:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
console.error
Warning: An update to GridScrollAreaRaw inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\GridScrollArea.js:62:5)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridMainContainer.js:26:74)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridVirtualScroller.js:60:58)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\containers\GridRoot.js:43:59)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\context\GridContextProvider.js:15:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:79:20
at setDimensions (node_modules/@mui/utils/node/useEventCallback/useEventCallback.js:25:18)
at Object.call [as current] (node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:200:5)
at EventManager.apply (node_modules/@mui/x-data-grid/node/hooks/utils/useGridApiEventHandler.js:43:11)
at EventManager.emit (node_modules/@mui/x-data-grid/node/utils/EventManager.js:57:18)
at Object.publishEvent (node_modules/@mui/x-data-grid/node/hooks/core/useGridApiInitialization.js:97:40)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:57:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
console.error
Warning: An update to GridScrollAreaRaw inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\GridScrollArea.js:62:5)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridMainContainer.js:26:74)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridVirtualScroller.js:60:58)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\containers\GridRoot.js:43:59)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\context\GridContextProvider.js:15:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:79:20
at setDimensions (node_modules/@mui/utils/node/useEventCallback/useEventCallback.js:25:18)
at Object.call [as current] (node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:200:5)
at EventManager.apply (node_modules/@mui/x-data-grid/node/hooks/utils/useGridApiEventHandler.js:43:11)
at EventManager.emit (node_modules/@mui/x-data-grid/node/utils/EventManager.js:57:18)
at Object.publishEvent (node_modules/@mui/x-data-grid/node/hooks/core/useGridApiInitialization.js:97:40)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:57:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
Here's the test file, but the table itself buried deep in the layout, so might not be informative:
import { ThemeProvider } from "@mui/material/styles";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import Loader from "Components/UI/Loader/Loader";
import { AuthProvider } from "context/AuthProvider";
import OrderList from "Pages/OrderList";
import { Suspense } from "react";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { store } from "reduxStore/store";
import { theme } from "Theme";
// import * as api from "../../reduxStore/api/orderListApiSlice";
beforeEach(() => {
// jest.spyOn(console, "error");
// console.error.mockImplementation(() => null);
localStorage.setItem("userId", "991d3a3a-6e71-4869-9861-2b897d7a9deb");
localStorage.setItem(
"default-customer-991d3a3a-6e71-4869-9861-2b897d7a9deb",
JSON.stringify({
customerId: "eu.33008274",
customerNumber: "33008274",
customerName: 'ООО "АДАМАНТ СПб"',
street: "Глухоозерское ш.,д.12,лит.А,пом.8-Н,оф.2",
postalCode: "Глухоозерское ш.,д.1",
city: "г.Санкт-Петербург",
state: "78",
countryId: "RU",
})
);
});
afterEach(() => {
// console.error.mockRestore();
});
jest.mock("react-i18next", () => ({
useTranslation: () => {
return {
t: (str) => str,
i18n: {
changeLanguage: () => new Promise(() => {}),
},
};
},
}));
jest.mock("hooks/useIsComponentEnabled", () => ({
useIsComponentEnabled: () => ({
getIsComponentEnabled: () => jest.fn(true),
isSuccess: true,
}),
}));
describe("OrderList", () => {
it("renders table correctly", async () => {
// const spy = jest.spyOn(api, "useGetOrderListQuery");
// spy.mockResolvedValueOnce({ data: testOrderData, isLoading: false });
render(
<Provider store={store}>
<Suspense fallback={<Loader />}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<AuthProvider>
<OrderList />
</AuthProvider>
</BrowserRouter>
</ThemeProvider>
</Suspense>
</Provider>
);
// const text = await screen.findByText("1–1 of 1");
// await waitFor(
// () => {
// expect(text).toBeInTheDocument();
// },
// { timeout: 10000 }
// );
expect(screen.getByRole("grid")).toBeInTheDocument();
screen.debug(undefined, 10000000);
});
});
I am introducing tests into my project and the thing I've encountered is that when I test the whole page component MUI X Data Grid table gives a wall of errors making it almost impossible to understand what is exactly wrong.
As I understand it, it has something to do with my table being resized in useEffect. Also I have set some autosize props and if I comment out these props and the useEffect the red wall goes away during tests. How do I fix this?
I tried wrapping render method in await waitFor which makes errors go away but I don't think it's the right way to do it since my IDE shows me this: "Avoid using side effects within waitFor callback"
MUI version: "@mui/material": "^5.15.21", "@mui/x-data-grid": "^7.8.0",
Here's the table component:
import { DataGrid, useGridApiRef } from "@mui/x-data-grid";
import { ruRU } from "@mui/x-data-grid/locales";
import { rowsPerPage } from "constants/constants";
import { useDetailsCard } from "hooks/useDetailsCard";
import { useGetTableData } from "hooks/useGetTableData";
import { useSelectedItemsCard } from "hooks/useSelectedItemsCard";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { OrderTableStyles } from "./ContentTableBodyStyles";
const ContentTableBody = ({ paginationModel, handlePagination }) => {
const { i18n } = useTranslation();
const { isFetching, data, dataItem, columns, isInvoices } = useGetTableData();
const apiRef = useGridApiRef();
const { openDetailsCard, closeDetailsCard, setOrderId } = useDetailsCard();
const {
openSelectedCard,
setDeliveriesToExport,
closeSelectedCard,
rowSelectionModel,
setRowSelectionModel,
} = useSelectedItemsCard(apiRef);
const openOrderCard = ({ id }) => {
setOrderId(id - 1);
openDetailsCard();
};
const handlePageSize = ({ pageSize, page }) => {
handlePagination({
page: paginationModel.pageSize !== pageSize ? 0 : page,
pageSize: pageSize,
});
};
const handleRowSelection = (rowIds) => {
setRowSelectionModel(rowIds);
if (isInvoices) return;
const deliveryIds = rowIds
.filter((rowId) => data.results[rowId - 1].deliveries.length)
.map((rowId) => data.results[rowId - 1].deliveries[0].deliveryId);
setDeliveriesToExport(deliveryIds);
if (rowIds.length) {
openDetailsCard();
openSelectedCard();
}
if (!rowIds.length) {
closeSelectedCard();
}
};
useEffect(() => {
closeDetailsCard();
}, [closeDetailsCard]);
useEffect(() => {
if (!isFetching) {
apiRef.current.autosizeColumns({
includeHeaders: true,
includeOutliers: true,
});
}
}, [isFetching, apiRef]);
const rows = data?.results.map((item, index) => dataItem(item, index)) || [];
return (
<DataGrid
autosizeOptions={{
includeOutliers: true,
includeHeaders: true,
}}
autosizeOnMount
autoHeight
checkboxSelection
disableRowSelectionOnClick
disableColumnMenu
disableColumnResize
rowCount={data?.count || 0}
paginationMode="server"
columnHeaderHeight={40}
rows={rows}
loading={isFetching}
apiRef={apiRef}
columns={columns}
getRowHeight={() => "auto"}
pageSizeOptions={rowsPerPage}
onRowClick={openOrderCard}
sortingOrder={["desc", "asc", null]}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 10 },
},
}}
paginationModel={paginationModel}
onPaginationModelChange={handlePageSize}
onRowSelectionModelChange={handleRowSelection}
rowSelectionModel={rowSelectionModel}
sx={OrderTableStyles}
localeText={
i18n.language === "ru"
? ruRUponents.MuiDataGrid.defaultProps.localeText
: null
}
/>
);
};
export default ContentTableBody;
And here's a snippet of the error since all of it doesn't fit in the terminal:
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:56:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
console.error
Warning: An update to ForwardRef(DataGrid) inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs./link/wrap-tests-with-act
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:79:20
at setDimensions (node_modules/@mui/utils/node/useEventCallback/useEventCallback.js:25:18)
at Object.call [as current] (node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:200:5)
at EventManager.apply (node_modules/@mui/x-data-grid/node/hooks/utils/useGridApiEventHandler.js:43:11)
at EventManager.emit (node_modules/@mui/x-data-grid/node/utils/EventManager.js:57:18)
at Object.publishEvent (node_modules/@mui/x-data-grid/node/hooks/core/useGridApiInitialization.js:97:40)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:57:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
console.error
Warning: An update to GridScrollAreaRaw inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs./link/wrap-tests-with-act
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\GridScrollArea.js:62:5)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridMainContainer.js:26:74)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridVirtualScroller.js:60:58)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\containers\GridRoot.js:43:59)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\context\GridContextProvider.js:15:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:79:20
at setDimensions (node_modules/@mui/utils/node/useEventCallback/useEventCallback.js:25:18)
at Object.call [as current] (node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:200:5)
at EventManager.apply (node_modules/@mui/x-data-grid/node/hooks/utils/useGridApiEventHandler.js:43:11)
at EventManager.emit (node_modules/@mui/x-data-grid/node/utils/EventManager.js:57:18)
at Object.publishEvent (node_modules/@mui/x-data-grid/node/hooks/core/useGridApiInitialization.js:97:40)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:57:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
console.error
Warning: An update to GridScrollAreaRaw inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs./link/wrap-tests-with-act
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\GridScrollArea.js:62:5)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridMainContainer.js:26:74)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\virtualization\GridVirtualScroller.js:60:58)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\components\containers\GridRoot.js:43:59)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\context\GridContextProvider.js:15:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\x-data-grid\node\DataGrid\DataGrid.js:27:55)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTableBody\ContentTableBody.jsx:11:29)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\ContentTable\ContentTable.jsx:9:52)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Paper\Paper.js:70:43)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\LeftGrid.jsx:4:21)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\Grid\Grid.js:381:48)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\MainContentGridContainer.jsx:3:37)
at fn (C:\web\1stprojectforserver\src\context\PageTypeProvider.js:5:36)
at div
at fn (C:\web\1stprojectforserver\node_modules\@emotion\react\dist\emotion-element-b1930563.cjs.js:73:23)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\createBox.js:31:40)
at fn (C:\web\1stprojectforserver\src\Components\UI\PageComponents\PageWrapper.jsx:3:24)
at fn (C:\web\1stprojectforserver\src\Pages\OrderList.jsx:19:33)
at fn (C:\web\1stprojectforserver\src\context\AuthProvider.js:5:32)
at fn (C:\web\1stprojectforserver\node_modules\react-router\lib\components.tsx:413:13)
at fn (C:\web\1stprojectforserver\node_modules\react-router-dom\index.tsx:774:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\DefaultPropsProvider\DefaultPropsProvider.js:18:3)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\RtlProvider\index.js:19:7)
at fn (C:\web\1stprojectforserver\node_modules\@mui\private-theming\node\ThemeProvider\ThemeProvider.js:39:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\system\ThemeProvider\ThemeProvider.js:52:5)
at fn (C:\web\1stprojectforserver\node_modules\@mui\material\node\styles\ThemeProvider.js:21:14)
at Suspense
at fn (C:\web\1stprojectforserver\node_modules\react-redux\src\components\Provider.tsx:58:3)
at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27628:9)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
at setState (node_modules/react-dom/cjs/react-dom.development.js:16708:7)
at l (node_modules/@mui/x-data-grid/node/hooks/utils/useGridSelector.js:50:9)
at forEach (node_modules/@mui/x-data-grid/node/utils/Store.js:25:35)
at Set.forEach (<anonymous>)
at Store.update (node_modules/@mui/x-data-grid/node/utils/Store.js:25:22)
at Object.setState (node_modules/@mui/x-data-grid/node/hooks/core/useGridStateInitialization.js:63:28)
at node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:79:20
at setDimensions (node_modules/@mui/utils/node/useEventCallback/useEventCallback.js:25:18)
at Object.call [as current] (node_modules/@mui/x-data-grid/node/hooks/features/dimensions/useGridDimensions.js:200:5)
at EventManager.apply (node_modules/@mui/x-data-grid/node/hooks/utils/useGridApiEventHandler.js:43:11)
at EventManager.emit (node_modules/@mui/x-data-grid/node/utils/EventManager.js:57:18)
at Object.publishEvent (node_modules/@mui/x-data-grid/node/hooks/core/useGridApiInitialization.js:97:40)
at setGridColumnsState (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:57:20)
at Object.updateColumns (node_modules/@mui/x-data-grid/node/hooks/features/columns/useGridColumns.js:99:5)
at Object.autosizeColumns (node_modules/@mui/x-data-grid/node/hooks/features/columnResize/useGridColumnResize.js:524:22)
Here's the test file, but the table itself buried deep in the layout, so might not be informative:
import { ThemeProvider } from "@mui/material/styles";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import Loader from "Components/UI/Loader/Loader";
import { AuthProvider } from "context/AuthProvider";
import OrderList from "Pages/OrderList";
import { Suspense } from "react";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { store } from "reduxStore/store";
import { theme } from "Theme";
// import * as api from "../../reduxStore/api/orderListApiSlice";
beforeEach(() => {
// jest.spyOn(console, "error");
// console.error.mockImplementation(() => null);
localStorage.setItem("userId", "991d3a3a-6e71-4869-9861-2b897d7a9deb");
localStorage.setItem(
"default-customer-991d3a3a-6e71-4869-9861-2b897d7a9deb",
JSON.stringify({
customerId: "eu.33008274",
customerNumber: "33008274",
customerName: 'ООО "АДАМАНТ СПб"',
street: "Глухоозерское ш.,д.12,лит.А,пом.8-Н,оф.2",
postalCode: "Глухоозерское ш.,д.1",
city: "г.Санкт-Петербург",
state: "78",
countryId: "RU",
})
);
});
afterEach(() => {
// console.error.mockRestore();
});
jest.mock("react-i18next", () => ({
useTranslation: () => {
return {
t: (str) => str,
i18n: {
changeLanguage: () => new Promise(() => {}),
},
};
},
}));
jest.mock("hooks/useIsComponentEnabled", () => ({
useIsComponentEnabled: () => ({
getIsComponentEnabled: () => jest.fn(true),
isSuccess: true,
}),
}));
describe("OrderList", () => {
it("renders table correctly", async () => {
// const spy = jest.spyOn(api, "useGetOrderListQuery");
// spy.mockResolvedValueOnce({ data: testOrderData, isLoading: false });
render(
<Provider store={store}>
<Suspense fallback={<Loader />}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<AuthProvider>
<OrderList />
</AuthProvider>
</BrowserRouter>
</ThemeProvider>
</Suspense>
</Provider>
);
// const text = await screen.findByText("1–1 of 1");
// await waitFor(
// () => {
// expect(text).toBeInTheDocument();
// },
// { timeout: 10000 }
// );
expect(screen.getByRole("grid")).toBeInTheDocument();
screen.debug(undefined, 10000000);
});
});
1 Answer
Reset to default 0For now fixed it by wrapping debug in waitFor:
await waitFor(() => {
screen.debug(undefined, 10000000);
});