Material-UI: Cannot Trigger the onChangeCommitted Event During Testing

Question

I am having problems testing the onChangeCommitted event using the slider from Mui. In a code sandbox I've recreated a simple implementation of the use of a slider.

Here's the code sandbox.

The problem I'm having is that while I figured out how to change the aria-valuenow property on the slider element itself (span with role="slider") the test does not seem to trigger the onChangeCommitted event. This is pretty annoying as i have side effects in the onChangeCommitted event that need to be tested.

Nikola Pervic · Accepted Answer · 2020-12-17 23:54:52Z

1

JSdom actually renders these tests without physical width so a method needed to be mocked with jest.

The actual solution to this problem was to mock screen.getByRole('slider').getBoundingClientRect using jest like so:

    screen.getByRole('slider').getBoundingClientRect = jest.fn(() => ({
      width: 100,
      height: 10,
      bottom: 10,
      left: 0,
      x: 0,
      y: 0,
      right: 0,
      top: 0,
      toJSON: jest.fn(),
    }));

Then mouse up and mouse down could be used like so:

fireEvent.mouseDown(screen.getByRole('slider'), { buttons: 1, clientX: 30 });
fireEvent.mouseUp(screen.getByRole('slider'), { buttons: 1, clientX: 30 });

answered Dec 17, 2020 at 23:54

Nikola Pervic

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Julian Kleine · Accepted Answer · 2020-11-06 15:18:18Z

0

You should trigger a mouseUp event in your tests. Referring to the mui docs

onChangeCommitted
Callback function that is fired when the mouseup is triggered.

Signature:
function(event: object, value: number | number[]) => void
event: The event source of the callback.
value: The new value.

So

fireEvent.mouseUp(...

instead of mouseDown

answered Nov 6, 2020 at 15:18

Julian Kleine

1,5478 silver badges14 bronze badges

1 Comment

Nikola Pervic Over a year ago

I should trigger this on a specific mark right? Because no event works when targeting the marks themself.

Collectives™ on Stack Overflow

Material-UI: Cannot Trigger the onChangeCommitted Event During Testing

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related