testing of RangeSlider using Jest - how to simulate user setting value using fireEvent

[David]

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:

        act(() => draggerEles[0].setAttribute("aria-valuenow", "7"));

does modify the component

but doesnt seem to cause any re-render!

[Stefan]

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

[David]

We have left it for a selenium E2E test to verify this interaction, altho it is quite a detailed interaction so maybe a unit test is the best place as it is cheaper to run.  I may get time to try the mouse events, using fireEvent?

[Stefan]

Hello,

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.