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.

Sign up for GitHub

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

Jump to bottom

10.0.1 broke react unit tests for components with Box from material-ui #1249

Closed
EugeneSnihovsky opened this issue Dec 28, 2019 · 4 comments
Closed

10.0.1 broke react unit tests for components with Box from material-ui #1249

EugeneSnihovsky opened this issue Dec 28, 2019 · 4 comments

Comments

@EugeneSnihovsky
Copy link

EugeneSnihovsky commented Dec 28, 2019 •
edited

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

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

@Janpot
Copy link

Janpot commented Dec 28, 2019 •
edited

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

@Janpot Janpot mentioned this issue Dec 28, 2019
Closed
@AumitLeon AumitLeon mentioned this issue Dec 29, 2019
Merged
nl0 added a commit to quiltdata/quilt that referenced this issue Dec 29, 2019
@nl0
temporarily downgrade jss due to breakage
82e8864 
jss@10.0.1 breaks mui, so downgrading for now
cssinjs/jss#1249
mui/material-ui#19005
@nl0 nl0 mentioned this issue Dec 29, 2019
Merged
nl0 added a commit to quiltdata/quilt that referenced this issue Dec 29, 2019
@nl0
temporarily downgrade jss due to breakage (#1476)
cc48ffd 
jss@10.0.1 breaks mui, so downgrading for now
cssinjs/jss#1249
mui/material-ui#19005
@HenriBeck
Copy link
Member

@kof we should revert this ASAP

@mceIdo mceIdo mentioned this issue Dec 30, 2019
Merged
1 task
@HenriBeck HenriBeck mentioned this issue Dec 30, 2019
Merged
3 tasks
@kof
Copy link
Member

kof commented Dec 30, 2019 •
edited

going to be fixed in 10.0.2

@kof kof closed this as completed Dec 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@kof @Janpot @un3solka @HenriBeck @EugeneSnihovsky