5.0.0-alpha.36: Jest can no longer test files with material-ui/icons

[abrudin]

Using a vanilla create-react-app with 5.0.0-alpha.36, testing is no longer supported out-of-the-box when rendering icons from @material-ui/icons. This is because of the removal of commonJS modules from @material-ui/icons, and it seems to require some apparently hacky workarounds to fix.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Running yarn test in a vanilla (un-ejected) create-react-app results in the following error:

FAIL  src/__tests__/MyTest.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token
    ...

Expected Behavior 🤔

yarn test (i.e. jest) should work without special configuration to support @material-ui/icons. At the very least the required workarounds should be documented so that it is obvious that this behaviour is intended.

Steps to Reproduce 🕹

A simple example could be found here
https://github.com/abrudin/materialuitestfail
which works on 5.0.0-alpha.35 but fails on 5.0.0-alpha.36.

Steps:

1. Create a new application using create-react-app
2. Add the necessary dependencies for @material-ui/icons:5.0.0-alpha.36 to work
3. Create a simple test which uses an icon from @material-ui/icons
4. Run yarn test

Context 🔦

We are trying to follow along with the changes made in 5.0.0-alpha and to adapt our administration application to work with all the changes. Tests are an important requirement for us, to make sure the application behaves without extensive manual testing.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
  Binaries:
    Node: 15.14.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.7.6 - /usr/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 89.0
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/core: 5.0.0-alpha.36 => 5.0.0-alpha.36 
    @material-ui/icons: 5.0.0-alpha.36 => 5.0.0-alpha.36 
    @material-ui/private-theming:  5.0.0-alpha.35 
    @material-ui/styled-engine:  5.0.0-alpha.34 
    @material-ui/system:  5.0.0-alpha.36 
    @material-ui/types:  6.0.1 
    @material-ui/unstyled:  5.0.0-alpha.35 
    @material-ui/utils:  5.0.0-alpha.35 
    @types/react:  17.0.11 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.3.2 => 4.3.2 

[eps1lon]

Thanks for the report.

This is already fixed on next and should be released within the next few days: #26656