<Tabs/> failed snapshot testing if it's scrollable

[thaindq]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The test case should have passed

Current Behavior

Running a snapshot test case using Jest with scrollable Tabs component produces this error:

TypeError: Cannot read property 'offsetHeight' of null

      at ScrollbarSize._this.setMeasurements (node_modules/react-scrollbar-size/ScrollbarSize.js:69:39)
      at ScrollbarSize.componentDidMount (node_modules/react-scrollbar-size/ScrollbarSize.js:91:10)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5461:24)
      at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6250:9)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2210:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2249:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2106:29)
      at commitAllWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6371:9)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6643:13)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2210:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2249:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2106:29)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6756:7)
      at scheduleUpdateImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7141:19)
      at scheduleUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7080:12)
      at scheduleTopLevelUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7351:5)
      at Object.updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7381:7)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8186:18)
      at createComponentWithIntl (src/utils/createComponentWithIntl.js:6:40)
      at Object.<anonymous> (src/containers/pages/Home.spec.js:9:63)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Steps to Reproduce (for bugs)

See https://codesandbox.io/s/vyn1xjwpw7

Context

Your Environment

Tech	Version
Material-UI	1.0.0-beta.38
React	16.2.0

[oliviertassinari]

@thaindq The issue comes from react-scrollbar-size. We can't do much about it here. I would encourage you to submit the issue on their side. cc @shawnmcknight

[shawnmcknight]

@thaindq I haven't utilized react-test-renderer before, but from what I am gathering it does not have the ability to deal with refs which is what react-scrollbar-size is doing. I cross-referenced facebook/react#9244 which links to Mocking Refs for Snapshot Testing.

If there is a way for this to be resolved within the repo itself, I'm happy to accept a PR, but its outside the scope of anything I'm going to personally be able to implement in the short-term.

[oliviertassinari]

@shawnmcknight Thanks for link. I believe Jest provides the tools needed to handle this use case. Let's close :).

[gaurikolhe]

@oliviertassinari I am getting a similar sentry error sometimes on medium screen size device (iPad) when I rotate the screen.
TypeError: null is not an object (evaluating 'nodeRef.current.offsetHeight')
On debug, I realize it's coming from, "Tabs/ScrollbarSize.js" file of MUI. I am importing Tabs element from MUI as below:

<Tabs
       scrollButtons="off"
       value={false}
       variant="scrollable"
     >

Please let me know if you have any suggestions. Thanks!

[oliviertassinari]

@gaurikolhe How can we reproduce?

[gaurikolhe]

@oliviertassinari I would leave the page idle (I don't have an exact time period from the bug filer), and then rotate the device (iPad) from portrait to landscape (I set responsive design mode of the browser to iPad for debug). It doesn't happen consistently. Thanks!

[oliviertassinari]

@gaurikolhe I can't reproduce with the documentation of the tabs. If you have a minimal live reproduction on v5, please open a new issue. Codesandbox can be really helpful.

[gaurikolhe]

@oliviertassinari I created new issue #26587. I also added steps on how to reproduce it on Codesandbox. Thank you.