search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.09k stars 32.33k forks source link

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

Open yoshegg opened 5 days ago

yoshegg commented 5 days ago

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 commented 1 day ago

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