Jss: 10.0.1 broke react unit tests for components with Box from material-ui

[EugeneSnihovsky]

__Describe the bug:__
I don't know why, but when I use

import { Box, Grid } from '@material-ui/core';

                <Box clone order={{ xs: 2, sm: 2, md: 2 }}>
                    <Grid item xs={ 12 } sm={ 12 } md={ 8 } lg={ 9 }>
                        <div className='recipe-page-video-info'>
                            <VideoInfoComponent />
                        </div>
                    </Grid>
                </Box>

Tests failed with error

  console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [TypeError: Cannot read property 'attach' of undefined]
        at reportException (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:385:16)
        at invokeGuardedCallback (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:440:31)
        at beginWork$$1 (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:25780:7)
        at performUnitOfWork (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:24698:12) TypeError: Cannot read property 'attach' of undefined
        at attach (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/@material-ui/styles/makeStyles/makeStyles.js:138:31)
        at /Volumes/WORKSPACE/projects/cook-for-more/node_modules/@material-ui/styles/makeStyles/makeStyles.js:256:7
        at useSynchronousEffect (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/@material-ui/styles/makeStyles/makeStyles.js:210:14)
        at /Volumes/WORKSPACE/projects/cook-for-more/node_modules/@material-ui/styles/makeStyles/makeStyles.js:248:5
        at StyledComponent (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/@material-ui/styles/styled/styled.js:100:21)
        at renderWithHooks (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:16260:18)
        at updateForwardRef (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:18143:20)
        at beginWork$1 (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:20211:16)
        at HTMLUnknownElement.callCallback (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:336:14)
        at invokeEventListeners (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:385:16)
        at invokeGuardedCallback (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:440:31)
        at beginWork$$1 (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:25780:7)
        at performUnitOfWork (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:24698:12)
        at workLoopSync (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:24671:22)
        at performSyncWorkOnRoot (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:24270:11)
        at scheduleUpdateOnFiber (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:23698:7)
        at updateContainer (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:27103:3)
        at /Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:27528:7
        at unbatchedUpdates (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:24433:12)
        at legacyRenderSubtreeIntoContainer (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:27527:5)
        at Object.render (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:27608:10)
        at fn (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:437:26)
        at /Volumes/WORKSPACE/projects/cook-for-more/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:354:37
        at batchedUpdates$1 (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom.development.js:24386:12)
        at Object.act (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1092:14)
        at wrapAct (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:354:13)
        at Object.render (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:423:16)
        at new ReactWrapper (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/enzyme/src/ReactWrapper.js:115:16)
        at mount (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/enzyme/src/mount.js:10:10)
        at createMountComponent (/Volumes/WORKSPACE/projects/cook-for-more/src/shared/mocks/enzyme.tool.tsx:175:12)
        at mountMockComponent (/Volumes/WORKSPACE/projects/cook-for-more/src/shared/mocks/enzyme.tool.tsx:103:12)
        at getTabs (/Volumes/WORKSPACE/projects/cook-for-more/src/pages/main/upload-video/description/description.component.test.tsx:30:21)
        at Object.it (/Volumes/WORKSPACE/projects/cook-for-more/src/pages/main/upload-video/description/description.component.test.tsx:88:35)
        at Object.asyncJestTest (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at resolve (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jest-jasmine2/build/queueRunner.js:43:12)
        at new Promise (<anonymous>)
        at mapper (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at promise.then (/Volumes/WORKSPACE/projects/cook-for-more/node_modules/jest-jasmine2/build/queueRunner.js:73:41)
        at process._tickCallback (internal/process/next_tick.js:68:7)


  console.error node_modules/react-dom/cjs/react-dom.development.js:21843
    The above error occurred in the <Styled(MuiBox)> component:
        in Styled(MuiBox) (at description.component.tsx:59)
        in div (created by ForwardRef(Grid))
        in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
        in WithStyles(ForwardRef(Grid)) (at description.component.tsx:57)
        in div (at description.component.tsx:56)
        in div (at description.component.tsx:55)
        in ConnectedDescriptionComponent (created by ConnectFunction)
        in ConnectFunction (at description.component.test.tsx:30)
        in ConnectedStateWrapper (created by ConnectFunction)
        in ConnectFunction (at enzyme.tool.tsx:179)
        in Unknown (created by Context.Consumer)
        in injectIntl(Component) (at translate-wrapper-app.component.tsx:29)
        in IntlProvider (at translate-wrapper-app.component.tsx:25)
        in ConnectedTranslatedApp (created by ConnectFunction)
        in ConnectFunction (at enzyme.tool.tsx:178)
        in Router (at enzyme.tool.tsx:177)
        in Provider (created by WrapperComponent)
        in WrapperComponent

Test is simple mount component unit test with enzyme.

There is 2 option to fix tests:

1. remove Box wrapper (not a variant for me)
2. manually replace in node_modules jss: 10.0.1 with jss: 10.0.0

Dependency "@material-ui/core": "4.4.3 and more"

[un3solka]

Same situation.
Dependency "@material-ui/styles": "4.5.0"

[Janpot]

this is a breaking change:
https://github.com/cssinjs/jss/pull/1242/files#diff-29aac1ba5d08e188c14800bc889c5474L186
sheet.update used to return this, now it returns undefined

[HenriBeck]

@kof we should revert this ASAP

[kof]

going to be fixed in 10.0.2