Describe the bug
I was trying to test the Select menu component using Testing-library/Vitest. However, I have tried fireEvent and userEvent, but none of these two libraries can click the select menu on the virtual DOM. I have switched between jsdom and happy-dom, but the problem still exists. I tried to click all the children of the select menu div (including the anchor div), but the virtual DOM stays the same.
I printed out the entire page, and found out that the page doesn't seem to be fully loaded on the virtual DOM. For example, in the running app, a div with the className anchor has other attributes such as tabindex and aria-disabled, but the div in the virtual DOM doesn't have those attributes.
I noticed someone else mentioned this issue on StackOverflow as well.
Create a test file and try to click the select menu and switch to a different option
See error
Expected behavior
In theory, users should have no problem clicking the select menu and seeing the virtual DOM update.
Desktop (please complete the following information):
OS: MacOS
Browser: chrome
Version: 119.0.6045.105
Additional context
I noticed the SMUI Button component always works when I tried to test it using Testinglibrary/Vitest. But the Select component never works probably because it uses div and list tags to create the UI instead of an actual button tag.
Describe the bug I was trying to test the Select menu component using Testing-library/Vitest. However, I have tried
fireEventanduserEvent, but none of these two libraries can click the select menu on the virtual DOM. I have switched betweenjsdomandhappy-dom, but the problem still exists. I tried to click all the children of the select menu div (including the anchor div), but the virtual DOM stays the same.I printed out the entire page, and found out that the page doesn't seem to be fully loaded on the virtual DOM. For example, in the running app, a div with the className
anchorhas other attributes such astabindexandaria-disabled, but the div in the virtual DOM doesn't have those attributes.I noticed someone else mentioned this issue on StackOverflow as well.
To Reproduce Steps to reproduce the behavior:
Expected behavior In theory, users should have no problem clicking the select menu and seeing the virtual DOM update.
Desktop (please complete the following information):
Additional context I noticed the SMUI Button component always works when I tried to test it using Testinglibrary/Vitest. But the Select component never works probably because it uses div and list tags to create the UI instead of an actual button tag.