[Bug]: Unit tests around Tabs are failing with Cannot read properties of undefined (reading 'offsetHeight')]

[caritaou]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

"@carbon/react": "1.61.0"

React version

"react": "17.0.2"

Description

Our application unit tests that uses Tabs are all failing with:

  console.error
    Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'offsetHeight')]
        at reportException (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
        at invokeEventListeners (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
        at invokeGuardedCallback (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
        at reportUncaughtErrorInDEV (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:22838:5)
        at captureCommitPhaseError (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-dom/cjs/react-dom.development.js:27126:5) TypeError: Cannot read properties of undefined (reading 'offsetHeight')
        at isEllipsisActive (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:591:34)
        at handler (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:621:7)
        at /Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:623:5
...


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

        at Tab (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:560:5)
        at div
        at div
        at TabList (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:203:5)
        at Tabs (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Tabs/Tabs.js:83:5)
        at div
        at Subtabs (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/panels/subtabs/subtabs.jsx:27:21)
        at div
        at div
        at li
        at AccordionItem (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Accordion/AccordionItem.js:37:5)
        at div
        at div
        at ul
        at AccordionProvider (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Accordion/AccordionProvider.js:23:5)
        at Accordion (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@carbon/react/lib/components/Accordion/Accordion.js:27:5)
        at div
        at EditorForm (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx:49:21)
        at ConnectFunction (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-redux/lib/components/connectAdvanced.js:235:41)
        at div
        at aside
        at Provider (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-redux/lib/components/Provider.js:21:20)
        at PropertiesMain (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx:48:21)
        at injectIntl(PropertiesMain)
        at CommonProperties (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/src/common-properties/common-properties.jsx:31:21)
        at injectIntl(CommonProperties)
        at div
        at RootFinder (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@wojtekmaj/enzyme-adapter-utils/src/RootFinder.jsx:4:32)
        at IntlProvider (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/react-intl/src/components/provider.js:33:47)
        at WrapperComponent (/Users/caritaou/git/cou/canvas/canvas_modules/common-canvas/node_modules/@wojtekmaj/enzyme-adapter-utils/src/createMountWrapper.jsx:46:26)

Further investigation, if we add a check to make sure the element exists before calling isEllipsisActive() then all the tests pass node_modules/@carbon/react/lib/components/Tabs/Tabs.js

  React.useLayoutEffect(() => {
    function handler() {
      console.log("!!! id=" + id);
      console.log("!!! doc=" + JSON.stringify(document));
      const elementTabId = document.getElementById(`${id}`);
      console.log("!!! elementTabId=" + elementTabId);
      const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
      if (newElement) { // <-------------------------
        isEllipsisActive(newElement);
      }
    }

Version 1.61.0-rc.1 had no issues

Reproduction/example

N/A

Steps to reproduce

1. Clone https://github.com/elyra-ai/canvas
2. go to common-canvas directory and run npm install
3. run the unit tests npm test

See more info in elyra-ai/canvas#2057

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

Elyra Common Properties

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[denish07makadiya]

I'm also facing this issue in latest version.

[caritaou]

I see there is another issue opened with a PR fix, closing this as a duplicate #16948