TypeError running tests with Jasmine

[Saul-BT]

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 🌎

npx @mui/envinfo

  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

[Saul-BT]

I have opened a pull request (#39942)

@zannager @brijeshb42

[brijeshb42]

After some debugging, this seems like an issue with the test runner and it's environment. When I just import it in node repl, the function is actually defined -

sandbox node     
Welcome to Node.js v18.18.2.
Type ".help" for more information.
> require('@mui/material/SvgIcon')
{
  default: [Getter],
  svgIconClasses: [Getter],
  getSvgIconUtilityClass: [Getter]
}
> require('@mui/material/SvgIcon').getSvgIconUtilityClass(['hello'])
'MuiSvgIcon-hello'

[Saul-BT]

Sorry for the newbie question, but I am not sure if the problem is related to the configuration of the testing environment (it is obvious to think so), I have tried many configuration options (Webpack + babel/ts-loader + tsconfig) and the problem persists 😢.

Does anyone have any idea what the problem might be, how to solve it, or can throw any hints or tips?

[michaldudak]

@brijeshb42, do you have any details from your investigation?

[brijeshb42]

@michaldudak I don't have it right now. But I just downloaded the codesandbox locally to test.

[michaldudak]

This may be fixed by EMS distribution improvements being worked on by @DiegoAndai in #41596