[Grid2] Container prop and custom theme fails tests due to missing theme.breakpoints

[yoshegg]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/devbox/elastic-fermat-6q7p7v
2. Run the tests in watch mode (npm test)
   • The test fails
3. Remove the container prop from <Grid2 /> in Component.jsx
   • The test is successful

Current behavior

The test fails with the following output:

Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'keys')]
    at reportException (/project/workspace/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
    at invokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
    at HTMLUnknownElement.dispatchEvent (/project/workspace/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
    at Object.invokeGuardedCallbackDev (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:27490:7)
    at performUnitOfWork (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:26599:12) TypeError: Cannot read properties of undefined (reading 'keys')
    at useUtilityClasses (/project/workspace/node_modules/@mui/system/Grid/createGrid.js:53:296)
    at Grid (/project/workspace/node_modules/@mui/system/Grid/createGrid.js:120:21)
    at renderWithHooks (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at updateForwardRef (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:19245:20)
    at beginWork (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:21675:16)
    at HTMLUnknownElement.callCallback (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (/project/workspace/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
    at invokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'keys')]
    at reportException (/project/workspace/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
    at invokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
    at HTMLUnknownElement.dispatchEvent (/project/workspace/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
    at Object.invokeGuardedCallbackDev (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at beginWork$1 (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:27490:7)
    at performUnitOfWork (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:26599:12) TypeError: Cannot read properties of undefined (reading 'keys')
    at useUtilityClasses (/project/workspace/node_modules/@mui/system/Grid/createGrid.js:53:296)
    at Grid (/project/workspace/node_modules/@mui/system/Grid/createGrid.js:120:21)
    at renderWithHooks (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at updateForwardRef (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:19245:20)
    at beginWork (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:21675:16)
    at HTMLUnknownElement.callCallback (/project/workspace/node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (/project/workspace/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
    at invokeEventListeners (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/project/workspace/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
The above error occurred in the <ForwardRef(Grid)> component:

    at Grid (/project/workspace/node_modules/@mui/system/Grid/createGrid.js:82:41)
    at Component (/project/workspace/src/Component.jsx:6:39)
    at DefaultPropsProvider (/project/workspace/node_modules/@mui/system/DefaultPropsProvider/DefaultPropsProvider.js:17:3)
    at RtlProvider (/project/workspace/node_modules/@mui/system/RtlProvider/index.js:14:3)
    at ThemeProvider (/project/workspace/node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:40:5)
    at ThemeProvider (/project/workspace/node_modules/@mui/system/ThemeProvider/ThemeProvider.js:55:5)
    at CssVarsProvider (/project/workspace/node_modules/@mui/system/cssVars/createCssVarsProvider.js:52:7)
    at ThemeProvider (/project/workspace/node_modules/@mui/material/node/styles/ThemeProvider.js:16:3)
    at themeProviderWrapper (/project/workspace/src/Component.test.jsx:13:35)

Expected behavior

The test should be successful.

Context

We want to define custom colors in addition to the default Material UI theme. Doing so and then importing the theme with useTheme() crashes all our component tests, that use a Grid2.

I assume that Grid2 in container mode is not using theme.breakpoints correctly. It is returned from useTheme(), as you can see in the in the test output (console.log() in Component.test.jsx).

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.1 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 20.12.1 - /home/codespace/nvm/current/bin/node
    npm: 10.5.0 - /home/codespace/nvm/current/bin/npm
    pnpm: 8.15.6 - /home/codespace/nvm/current/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: 11.13.5 => 11.13.5 
    @emotion/styled: 11.13.5 => 11.13.5 
    @mui/core-downloads-tracker:  6.1.8 
    @mui/icons-material: 6.1.8 => 6.1.8 
    @mui/material: 6.1.8 => 6.1.8 
    @mui/private-theming:  6.1.8 
    @mui/styled-engine:  6.1.8 
    @mui/system:  6.1.8 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.8 
    @types/react: 18.3.12 => 18.3.12 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 

Search keywords: Grid2 container breakpoints theme custom-theme

[siriwatknp]

This is a bug with theme scoping. The Grid is not picking up the correct theme.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@yoshegg How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.