mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.74k stars 32.24k forks source link

Error when testing with testing-library render #28083

Closed ZeeD closed 3 years ago

ZeeD commented 3 years ago

with this basic test

import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import Dialog from "@material-ui/core/Dialog";

test('DimensionModal', () => {
    render(<Dialog open={true} />);
});

yarn test ends with error:


    TypeError: Cannot set property 'scrollTop' of null

       7 |
       8 | test('DimensionModal', () => {
    >  9 |      render(<Dialog open={true} />);
         |      ^
      10 | });
      11 | //
      12 | //

      at handleMounted (node_modules/@material-ui/core/Modal/Modal.js:159:32)
      at node_modules/@material-ui/core/Modal/Modal.js:185:7
      at node_modules/@material-ui/core/utils/useEventCallback.js:25:29
      at setRef (node_modules/@material-ui/core/utils/setRef.js:11:5)
      at node_modules/@material-ui/core/Portal/Portal.js:57:27
      at node_modules/jest-react-hooks-shallow/src/mock-use-effect/mock-use-effect.ts:28:31
      at Portal (node_modules/@material-ui/core/Portal/Portal.js:55:3)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:15020:18)
      at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:17044:20)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19098:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23940:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at node_modules/@testing-library/react/dist/pure.js:101:25
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at render (node_modules/@testing-library/react/dist/pure.js:97:26)
      at Object.<anonymous> (src/pages/rights-matrix/dimension-modal/__tests__/DimensionModal.test.js:9:2)

  console.error
    The above error occurred in the <ForwardRef(Portal)> component:

        at Portal (C:\Users\vito.detullio\Desktop\workspace-srm\fe-app\node_modules\@material-ui\core\Portal\Portal.js:39:24)
        at Modal (C:\Users\vito.detullio\Desktop\workspace-srm\fe-app\node_modules\@material-ui\core\Modal\Modal.js:94:36)
        at Dialog (C:\Users\vito.detullio\Desktop\workspace-srm\fe-app\node_modules\@material-ui\core\Dialog\Dialog.js:184:29)
        at WithStyles(ForwardRef(Dialog)) (C:\Users\vito.detullio\Desktop\workspace-srm\fe-app\node_modules\@material-ui\styles\withStyles\withStyles.js:67:31)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
support[bot] commented 3 years ago

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

schok-d commented 2 years ago

@ZeeD Were you able to find a work around or something with this issue? I am seeing similar TypeError while trying to write a simple test for Material UI Dialog using React Testing Library. I am using Material UI version 4.13. Thank you.

ZeeD commented 2 years ago

@schok-d no, sorry. I left the project now, but while I was on we simply abandon the idea to do these kind of tests.

numanabaid commented 6 months ago

Any update on this?