Material-UI: Cannot Trigger the onChangeCommitted Event During Testing

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 });

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top