I have a range slider within my own functional component, and want to test the user setting the slider values from Jest.
I have tried:
const draggerEles = within(rangeSliderEle).getAllByTitle("Drag")
fireEvent.change(draggerEles[0], { target: { value:7 } })
but it errors with "The given element does not have a value setter"
I could be setting the wrong element of course, maybe I should set the slider role elements. But I've tried those as well, to no avail.
How do I find out what setters or events are supported for an element?
interestingly, using:
does modify the component
but doesnt seem to cause any re-render!
1 Answer, 1 is accepted
Hello,
You can simulate onMouseDown and onMouseMove on mock coordinates. This triggers an action.
Another option will be to directly click a specific step.
In general, we use e2e test for these interactions as they involve real user interaction. We can recommend using e2e tests as well for this case if the application uses e2e tests.
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Yes, we agree that unit tests are faster to run. Still, we recommend them for simple functionalities as they test a specific function/unit of the component. Changing the value of the RangeSlider internally uses a couple of events and different functions are executed and the test can return false-negative results.