Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError running tests with Jasmine #39937

Open
2 tasks done
Saul-BT opened this issue Nov 20, 2023 · 6 comments
Open
2 tasks done

TypeError running tests with Jasmine #39937

Saul-BT opened this issue Nov 20, 2023 · 6 comments
Assignees
Labels
external dependency Blocked by external dependency, we can’t do anything about it package: material-ui Specific to @mui/material package: utils Specific to the @mui/utils package

Comments

@Saul-BT
Copy link

Saul-BT commented Nov 20, 2023

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 Saul-BT added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 20, 2023
@zannager zannager added the package: system Specific to @mui/system label Nov 20, 2023
@Saul-BT
Copy link
Author

Saul-BT commented Nov 21, 2023

I have opened a pull request (#39942)

@zannager @brijeshb42

@zannager zannager assigned michaldudak and unassigned brijeshb42 Nov 21, 2023
@zannager zannager added package: utils Specific to the @mui/utils package package: material-ui Specific to @mui/material and removed package: system Specific to @mui/system labels Nov 21, 2023
@brijeshb42
Copy link
Contributor

brijeshb42 commented Nov 21, 2023

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'

@brijeshb42 brijeshb42 added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 21, 2023
@mj12albert mj12albert added external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for author Issue with insufficient information labels Nov 22, 2023
@Saul-BT
Copy link
Author

Saul-BT commented Nov 23, 2023

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
Copy link
Member

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

@brijeshb42
Copy link
Contributor

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

@michaldudak
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
external dependency Blocked by external dependency, we can’t do anything about it package: material-ui Specific to @mui/material package: utils Specific to the @mui/utils package
Projects
None yet
Development

No branches or pull requests

5 participants