Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Testing with jest/vitest (scrollIntoView is not available) #102

Open
cguedes opened this issue Jul 13, 2023 · 2 comments
Open

[BUG] Testing with jest/vitest (scrollIntoView is not available) #102

cguedes opened this issue Jul 13, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@cguedes
Copy link

cguedes commented Jul 13, 2023

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:

  1. Create a project with kmenu
  2. Create a unit test using testing library
  3. Create a test that renders the kmenu
  4. Ensure that the kmenu renders (open the menu by default for example)
  5. 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 = () => { };
@haaarshsingh
Copy link
Owner

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.

@cguedes
Copy link
Author

cguedes commented Jul 17, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants