TypeError running tests with Jasmine

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/jasmine-error-lmnhhk

Steps:

1. Create a Next.js project
2. Add MUI packages
3. Add basic Jasmine stuff
4. Create a basic component & tests
5. Run the tests

Current behavior 😯

I get this error:

  Message:
    TypeError: getUtilityClass is not a function
  Stack:
        at eval (webpack://workspace/./node_modules/@mui/utils/esm/composeClasses/composeClasses.js?:13:30)
        at Array.reduce (<anonymous>)
        at eval (webpack://workspace/./node_modules/@mui/utils/esm/composeClasses/composeClasses.js?:11:32)
        at Array.forEach (<anonymous>)
        at composeClasses (webpack://workspace/./node_modules/@mui/utils/esm/composeClasses/composeClasses.js?:7:22)
        at useUtilityClasses (webpack://workspace/./node_modules/@mui/material/SvgIcon/SvgIcon.js?:42:78)
        at SvgIcon (webpack://workspace/./node_modules/@mui/material/SvgIcon/SvgIcon.js?:115:19)
        at renderWithHooks (webpack://workspace/./node_modules/react-dom/cjs/react-dom.development.js?:16305:18)
        at updateForwardRef (webpack://workspace/./node_modules/react-dom/cjs/react-dom.development.js?:19221:20)
        at beginWork (webpack://workspace/./node_modules/react-dom/cjs/react-dom.development.js?:21631:16)

Expected behavior 🤔

Tests run correctly

Context 🔦

I want to use Jasmine for testing...

If I edit thenode_modules/@mui/utils/esm/composeClasses/composeClasses.js file in the following way, all problems disappear...

export default function composeClasses(slots, getUtilityClass, classes = undefined) {
  const output = {};
  Object.keys(slots).forEach(
  // `Object.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
  // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
  slot => {
    output[slot] = slots[slot].reduce((acc, key) => {
      if (key) {
        const utilityClass = getUtilityClass?.(key) ?? ''; // <-- Changed this
        if (utilityClass !== '') {
          acc.push(utilityClass);
        }
        if (classes && classes[key]) {
          acc.push(classes[key]);
        }
      }
      return acc;
    }, []).join(' ');
  });
  return output;
}

Your environment 🌎

  System:
    OS: macOS 14.1
  Binaries:
    Node: 21.0.0 - ~/.nvm/versions/node/v21.0.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v21.0.0/bin/yarn
    npm: 10.2.0 - ~/.nvm/versions/node/v21.0.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.159
    Edge: Not Found
    Safari: 17.1
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.24
    @mui/core-downloads-tracker:  5.14.18
    @mui/icons-material: ^5.14.18 => 5.14.18
    @mui/material: ^5.14.18 => 5.14.18
    @mui/private-theming:  5.14.18
    @mui/styled-engine:  5.14.18
    @mui/system:  5.14.18
    @mui/types: ^7.2.9 => 7.2.9
    @mui/utils:  5.14.18
    @types/react: ^18 => 18.2.35
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    typescript: ^5 => 5.2.2

Reproduce the failure using the linked CodeSandbox: create the Next.js project with MUI packages and Jasmine, then run the component tests. Inspect node_modules/@mui/utils/esm/composeClasses/composeClasses.js and the reported stack trace; done means the Jasmine tests run without the getUtilityClass TypeError.