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

Select menu component cannot be tested using testing-library #635

Open
haoshuai999 opened this issue Nov 2, 2023 · 0 comments
Open

Select menu component cannot be tested using testing-library #635

haoshuai999 opened this issue Nov 2, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@haoshuai999
Copy link

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.

@haoshuai999 haoshuai999 added the bug Something isn't working label Nov 2, 2023
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

1 participant