RuxSelect Testing

[Jonathan (WhiteTiburon)]

I cannot get the onChange Event to fire off in testing for RuxSelect, using vitest and react testing library. Are there any examples of it?

[Micah Jones (micahjones13)]

Hey Jonathan (@WhiteTiburon), thanks for the question!
The recognized change event for RuxSelect is onRuxchange, not react's onChange, so that could be the issue.
Are you able to provide any code snippets of the test in question? Are you using react testing library's fireEvent to trigger this change event, or something else?

[Jonathan (WhiteTiburon)]

Thanks for your reply,

I am using onRuxchange. I tried using fireEvent, userEvent, and also Simulate. None of them fire off the event.

Here is the function that is not called when I select a value. I also passed it a function and no luck.

[Micah Jones (micahjones13)]

Are you able to verify that the onChange function is firing when triggering the change manually from the app itself? Matching the syntax from the screenshot you provided doesn't fire the onChange event passed into onRuxchange at all, but of course our environments probably vary wildly. I would expect it to look more like onRuxchange={(e) => onChange(e)}.
I was able to get a very basic fireEvent.change working on a RuxSelect in a demo repo I've created. You can see that repo here. All it shows is that the value of the select menu does indeed change, and in turn should trigger your onChange method.
Let me know if this helps solve the issue! In the meantime I'll keep investigating.

[Jonathan (WhiteTiburon)]

In the app itself everything works as it should. I changed it to the syntax you have and I get the same results. Can you test it with userEvent as I want a full interaction that fires off events and not only to dispatch a DomEvent, what fireEvent does. I think this might solve the issue.

Also, I do have a test that does change the value and the value is updated but the event is not fired off

[Micah Jones (micahjones13)]

I've updated that repo with some more examples using userEvent and a mock function to show that the onChange function is firing as it should. Hopefully that can be adapted to fit your test case.

[Jonathan (WhiteTiburon)]

Micah Jones (@micahjones13) thanks, going to try them. I was working on updating all my test deps to eliminate that possibility.

[Jonathan (WhiteTiburon)]

Micah Jones (@micahjones13) I was able to adopt one of your examples, fire the onChange, and reflect in the testing coverage. Thank you!
Here is a small example of what I used:

import { render } from '@testing-library/react'
import { screen, within } from 'shadow-dom-testing-library'

render()

const selectMenu = screen.getByTestId('select')

expect(selectMenu).toBeDefined()
expect(selectMenu).toHaveValue('0')

const shadowSelect = await within(selectMenu).findByShadowRole('combobox')
await user.selectOptions(shadowSelect, '1')

waitFor(() => expect(selectMenu.value).toBe('1'))

shadow-dom-testing-library did the trick.