[material-ui] Error in Tests [TypeError: Cannot read property 'scrollTop' of null]

[Technologeek]

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

Current Behavior 😯

Hi, I'm using the Tabs component and passing all the props that I require using my own wrapper component. Everything is working fine except when I add scrollable prop to the component.

const returnScrollable = () => {
  const [value, setValue] = useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <Tabs
        tabItems={tabItemsScrollable} //array of tabs
        onChange={handleChange}
        value={value}
        variant="scrollable"
        scrollButtons="auto"
      />
    </>
  );
};

This works as it's supposed to be without any errors on the console but when I run tests through Jest of updating the snap-shots using storybook, I'm getting an error.

Error: Uncaught [TypeError: Cannot read property 'offsetHeight' of null]
Error: Uncaught [TypeError: Cannot read property 'scrollTop' of null]

The above error occurred in the <ScrollbarSize> component:
        in ScrollbarSize (created by ForwardRef(Tabs))
        in div (created by ForwardRef(Tabs))
        in ForwardRef(Tabs) (created by WithStyles(ForwardRef(Tabs)))
        in WithStyles(ForwardRef(Tabs)) (created by SBTabs)
        in header (created by ForwardRef(Paper))
        in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
        in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
        in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
        in WithStyles(ForwardRef(AppBar)) (created by SBTabs)
        in div (created by SBTabs)
        in SBTabs (created by WithStyles(SBTabs))
        in WithStyles(SBTabs) (created by BaseStoryScrollable)
        in BaseStoryScrollable

Expected Behavior 🤔

The tests should pass just like it does when the scrollable prop is not passed on the Tabs component.

Steps to Reproduce 🕹

Steps:

1. Create a component using Tabs and try Jest snap-shot testing it.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.3.1
React	16.9.0
Browser	Chrome
TypeScript	NA
etc.

[oliviertassinari]

@Technologeek Thanks for opening this issue, this is related to #17070 and how we should improve our testing guide. I think that it's a topic we have already discussed in #16523. The solution we went for is to test all our components with:

import ReactTestRenderer from 'react-test-renderer';

ReactTestRenderer.act(() => {
  ReactTestRenderer.create(<Foo />, {
    createNodeMock: node => {
      return document.createElement(node.type);
    },
  });
});

+80% of our components are passing this test. We will work on raising it to 100%. The ones that don't are the components using react-transition-groups or mounting a Portal. It's not the case of the tabs.

I assume that you are using @storybook/addon-storyshots: https://storybook.js.org/docs/testing/structural-testing/, https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core.

Looking at the sources, it leads me to: https://github.com/storybookjs/storybook/blob/v5.2.0-beta.39/addons/storyshots/storyshots-core/src/frameworks/react/renderTree.js.

Alright, it seems that part of the solution is documented in: https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#using-createnodemock-to-mock-refs.

Could you try the following?

import ReactTestRenderer from 'react-test-renderer';
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';

initStoryshots({
  test: snapshotWithOptions({
    renderer: storyElement =>
      ReactTestRenderer.act(() => {
        ReactTestRenderer.create(storyElement, {
          createNodeMock: node => document.createElement(node.type),
        });
      }),
  }),
});

or

import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots'

initStoryshots({
  test: snapshotWithOptions({
    createNodeMock: node => document.createElement(node.type),
  }),
})

[Technologeek]

@oliviertassinari Thanks a lot for your quick reply! As far as my use-case is concerned, I'm not getting any console-errors or warnings and the component seems to pass all other tests. I could apply your suggestion but it is not needed at the moment. We have multiple such third party elements which fail tests due to ForwardRefs but the component works great without any console errors. For now, I prefer to just ignore that story. If it helps anybody, this is how you ignore a story..

//In your storyshots.test.js file

import initStoryshots from "@storybook/addon-storyshots";

initStoryshots({
  storyKindRegex: /^((?!.*?NameOfYourStory).)*$/
});

Thanks again for your help!

[carloscuesta]

Hey @oliviertassinari just wanted to say that the solution you provided with act and createNodeMock worked and helped out with our tests

Thanks 🙏

[oliviertassinari]

@carloscuesta Thanks for the feedback! Now, we need to update the testing guide: #17070. Any help would be appreciated.

[sibelius]

this is also happening when using the unstable_createMuiTheme

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Transition`.
    in Content (created by Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by ForwardRef(StrictModeGrow))
    in ForwardRef(StrictModeGrow) (created by ForwardRef(Snackbar))
    in div (created by ClickAwayListener)
    in ClickAwayListener (created by ForwardRef(Snackbar))
    in ForwardRef(Snackbar) (created by WithStyles(ForwardRef(Snackbar)))
    in WithStyles(ForwardRef(Snackbar)) (created by Snackbar___c2)
    in Snackbar___c2 (created by Snackbar)

Uncaught TypeError: Cannot read property 'scrollTop' of null
    at reflow (utils.js:2)
    at Object.handleEnter [as onEnter] (Grow.js:48)
    at Transition.performEnter (Transition.js:260)
    at Transition.updateStatus (Transition.js:231)
    at Transition.componentDidMount (Transition.js:174)

[eps1lon]

this is also happening when using the unstable_createMuiTheme

If you use this theme you need to make sure that children of transition components forward their refs to the outermost DOM node. The original plan was to add documentation for this but there were other StrictMode issues that weren't fixable so I didn't pursue this beyond internal usage.

Would greatly appreciate it if someone would add docs for unstable_createMuiTheme with caveats to https://material-ui.com/customization/theming:

• unstable_ means use at your own risk and not in production
• seriously don't use this in production. It only removes deprecation warnings.
• children of transition components need to forward their refs (maybe with example for Drawer)

[sibelius]

thanks for this explanation, now I know how to fix this

I'm using it only in Dev to test how it goes

[uazure]

import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots'

initStoryshots({
  test: snapshotWithOptions({
    createNodeMock: node => document.createElement(node.type),
  }),
})

This works fine for me. Thank you!