LegacyTabComponent fails to render in unit tests when migrating to iTwinUI 3

[hl662]

Hello,

I'm in the process of migrating a package's components from using iTwinUI v2 to v3, there's no visual regressions that I can see when testing the components in a test app, I've updated almost all the tests but I was left with one component that is failing it's unit test.

This is the PR I'm working on: iTwin/viewer-components-react#1136. This is the component, it uses the Legacy API of the Tabs component. Running any of that component's tests would cause an error to throw when trying to mount the component, with this error:

  13) MapManagerSettings
       heightOriginMode ground:
     TypeError: tabRef.current?.parentElement?.scrollTo is not a function
      at /Users/hoangnamle/Documents/viewer-components-react/packages/itwin/map-layers/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@itwin/itwinui-react/cjs/core/Tabs/Tabs.js:144:38
      at commitHookEffectListMount (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:20573:26)
      at commitLifeCycles (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:20634:11)
      at commitLayoutEffects (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25)
      at invokeEventListeners (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at Object.invokeGuardedCallbackDev (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at commitRootImpl (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:23151:9)
      at unstable_runWithPriority (node_modules/.pnpm/[email protected]/node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at commitRoot (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:22990:3)
      at performSyncWorkOnRoot (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:22329:3)
      at scheduleUpdateOnFiber (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at /Users/hoangnamle/Documents/viewer-components-react/packages/itwin/map-layers/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at /Users/hoangnamle/Documents/viewer-components-react/packages/itwin/map-layers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:443:26
      at /Users/hoangnamle/Documents/viewer-components-react/packages/itwin/map-layers/node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:360:37
      at batchedUpdates$1 (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at Object.act (node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at wrapAct (node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:360:13)
      at Object.render (node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@wojtekmaj/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js:429:16)
      at new ReactWrapper (node_modules/.pnpm/[email protected]/node_modules/enzyme/src/ReactWrapper.js:115:16)
      at Object.mount (node_modules/.pnpm/[email protected]/node_modules/enzyme/src/mount.js:10:10)
      at mountComponent (src/test/MapManagerSettings.test.tsx:115:19)
      at Context.<anonymous> (src/test/MapManagerSettings.test.tsx:473:23)
      at processImmediate (node:internal/timers:491:21)

I was able to reproduce this error still when switching from using enzyme.mount() over to testing-library/react render(), so I went into the Tabs source code and traced it back to the Tab subcomponent's useLayoutEffect. If I commented that hook function out of the compiled Tabs.js code in my PR branch's node_modules, the tests would pass. I'd like advice on what I should do...

I did try moving over to using the Tabs' Composite API, and the tests pass, but on the other hand the component would break in the test app, with this error:

[r100-stack]

Thanks for your investigation! I believe you are using JSDOM? If so, Element.scrollTo() is not implemented in it. So you'd need to define a function for it or mock it or something similar.

Since we also use JSDOM in our vitest unit tests for Tabs we have also defined a dummy function for scrollTo:

iTwinUI/packages/itwinui-react/setupTests.ts

Line 8 in 5e31043

window.HTMLElement.prototype.scrollTo = () => {};

[hl662]

this did the trick! Thank you so much!