Description

Hi, I've been working on testing a component which contains multiple <Range> components with @react-testing-library and are having issues attempting to programmatically changing the value of the slider. Specifically I cannot replicate a focus and keydown user event.

Code

This is what my code looks like:

...
const sliders1 = within(rows[0]).getAllByRole("slider");
await act(async () => {
  fireEvent.focus(sliders1[1]);
  console.log('Slider after focus: \n', prettyDOM(sliders1[1]));
  fireEvent.keyDown(sliders1[1], { key: 'ArrowRight', code: 'ArrowRight' });
  fireEvent.keyDown(sliders1[1], { key: 'ArrowRight', code: 'ArrowRight' });
  console.log('Slider after KeyDown: \n', prettyDOM(sliders1[1]));
});

These are the results of the console.log() calls:

Slider after focus:  
    <div
      aria-disabled="false"
      aria-valuemax="60"
      aria-valuemin="0.5"
      aria-valuenow="30.5"
      class="rc-slider-handle rc-slider-handle-2"
      role="slider"
      style="left: 50.42016806722689%; transform: translateX(-50%);"
      tabindex="0"
    />

Slider after KeyDown:  
    <div
      aria-disabled="false"
      aria-valuemax="60"
      aria-valuemin="0.5"
      aria-valuenow="30.5"
      class="rc-slider-handle rc-slider-handle-2"
      role="slider"
      style="left: 50.42016806722689%; transform: translateX(-50%);"
      tabindex="0"
    />

As you can see, the valuenow is the same before and after the keyDown event. Also I noticed the rc-slider-handle-dragging class is not present.

The code below shows how I am currently rendering the <Range> component:

<Range
  min={limitsMin}
  max={limitMax}
  step={0.5}
  value={row.value}
  allowCross={false}
  onChange={(e: any) => handleSliderChange(e, index)}
  marks={getRangeMarks(row)}
  data-testid="range-height"
/>

NOTE 1:

The Range's onChange handler is triggered, but the event contains the same exact values the <Range> currently has which is :[0.5, 30.5, 60] (There's no change in the actual values).

NOTE 2:

The class rc-slider-handle-dragging is present in the first slider even though I never set it myself. If I try to fire a keyDown event it does not work either.

Update 1:

Looking at both the container.baseElement and the actual Range, they both have a clientHeight and clientWidth of 0. Not sure if that might be causing the issues.

Environment

• rc-slider: "9.2.4"
• @types/rc-slider: "^8.6.5"
• @testing-library/react: "^9.5.0"
• @testing-library/jest-dom: "^4.2.4"