TypeError: (0 , _system.css) is not a function error with Jest and Material UI

[jelling]

🐛 Bug Report

When running jest (v24.8) I get this error for multiple files:

    TypeError: (0 , _system.css) is not a function

    > 1 | import {
        | ^
      2 |   createStyles,
      3 |   makeStyles,
      4 |   TextField,

      at Object.<anonymous> (node_modules/@material-ui/core/Box/Box.js:14:37)
      at Object.<anonymous> (node_modules/@material-ui/core/Box/index.js:21:36)
      at Object.<anonymous> (node_modules/@material-ui/core/index.js:1025:36)
      at Object.<anonymous> (src/_nautical/sellers/components/SellerSignup/SellerSignupCompany.tsx:1:1)
      at Object.<anonymous> (src/_nautical/sellers/views/SellerSignupPage/SellerSignupPage.tsx:47:1)
      at Object.<anonymous> (src/_nautical/sellers/views/SellerSignupPage/index.ts:1:1)

The issue appears to be how the material UI (v4.9) components are imported:

// importing them one at a time works
import * as Button from "@material-ui/core/Button";
import * as Card from "@material-ui/core/Card";
import * as CircularProgress from "@material-ui/core/CircularProgress";
import * as Divider from "@material-ui/core/Divider";
import * as Grid from "@material-ui/core/Grid";
import * as Icon from "@material-ui/core/Icon";
import * as Step from "@material-ui/core/Step";
import * as StepButton from "@material-ui/core/StepButton";
import * as Stepper from "@material-ui/core/Stepper";
import * as Typography from "@material-ui/core/Typography";

// but this breaks jest tests for some reason, even though it compiles
// import {
//   Button,
//   Card,
//   CircularProgress,
//   Divider,
//   Grid,
//   Icon,
//   Step,
//   StepButton,
//   Stepper,
//   Typography
// } from "@material-ui/core";

I am ignoring CSS files like this in my jest config:

    "moduleNameMapper": {
      ...
      "^.+.(css|sass|scss)$": "identity-obj-proxy"
    }

Any ideas? Converting every import in the project seems like unnecessary and a lot of work.

Expected behavior

No errors

envinfo

  System:
    OS: macOS 11.2.3
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
    Yarn: 1.22.10 - ~/dev/nautical/client/artemis/dashboard/node_modules/.bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
  npmPackages:
    jest: ^24.8.0 => 24.9.0 

[github-actions[bot]]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.