kmenu
kmenu copied to clipboard
[BUG] Testing with jest/vitest (scrollIntoView is not available)
Describe the bug When using kmenu in unit tests, with Testing Library and jest/vitest, the tests fail because scrollIntoView is not available. I've identified that the cause is that the function isn't implemented by jsdom.
To Reproduce Steps to reproduce the behavior:
- Create a project with kmenu
- Create a unit test using testing library
- Create a test that renders the kmenu
- Ensure that the kmenu renders (open the menu by default for example)
- See error "scrollIntoView is not available"
Expected behavior The component should render it's content inside the test runner.
Screenshots
TypeError: _bottomRef$current.scrollIntoView is not a function
❯ node_modules/kmenu/src/Command.tsx:25:26
❯ commitHookEffectListMount node_modules/react-dom/cjs/react-dom.development.js:23150:26
❯ commitPassiveMountOnFiber node_modules/react-dom/cjs/react-dom.development.js:24931:11
❯ commitPassiveMountEffects_complete node_modules/react-dom/cjs/react-dom.development.js:24891:9
❯ commitPassiveMountEffects_begin node_modules/react-dom/cjs/react-dom.development.js:24878:7
❯ commitPassiveMountEffects node_modules/react-dom/cjs/react-dom.development.js:24866:3
❯ flushPassiveEffectsImpl node_modules/react-dom/cjs/react-dom.development.js:27039:3
❯ flushPassiveEffects node_modules/react-dom/cjs/react-dom.development.js:26984:14
❯ node_modules/react-dom/cjs/react-dom.development.js:26769:9
❯ flushActQueue node_modules/react/cjs/react.development.js:2667:24
Desktop (please complete the following information):
- OS: osx
- Browser: Tauri
Additional context This can be fixed by adding the missing function without any implementation.
window.HTMLElement.prototype.scrollIntoView = () => { };
Hey, @cguedes, I'm unsure on how I should go about helping you here? You gave me all the details I asked for but I'm unsure if I fully understand how this can be fixed.
Hi. That's a good point. Maybe you can add some init tests to identify the best way of fixing this. Additionally you can have a note in README.md