zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

Incompatibility with React Testing Library #316

Open charlieforward9 opened 3 months ago

charlieforward9 commented 3 months ago

Description

Rendering a simple <ReactSlider ... /> with React Testing Library:

const slider = screen.getByRole("slider");
const currentValue = slider.getAttribute("aria-valuenow");
console.log(currentValue); // Logs '2'
fireEvent.change(screen.getByRole("slider"), {
  target: { value: { now: Number(currentValue) - 1 } },
});

This fails with the error The given element does not have a value setter. (I tried a ton of workaround inputs, such as target: {value: ... } }, value: { },, value: { now: {...}}

It would be nice to be able to test the onChange functionality nested within this component without having to engage in tedious workarounds.

CodeSandbox

TODO: I will get to this when I get a little more time Edit zillow/react-slider