Select menu component cannot be tested using testing-library

[haoshuai999]

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.

To Reproduce Steps to reproduce the behavior:

1. Install vitest and testing library
2. Create a simple Select component using the SMUI library
3. Create a test file and try to click the select menu and switch to a different option
4. 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.