Изменение значения реагирующего компонента ввода с JS не вызывает событие inputChange

Question

У меня есть диапазон ввода, в котором происходит несколько вещей onChange. Это работает, как я и ожидал, при использовании ручного нажатия / перетаскивания. Однако, когда я пытаюсь изменить значение с помощью JavaScript, мое событие onChange, похоже, не срабатывает.

Вот мой код:

const App = () => {
  const [currentValue, setCurrentValue] = useState(0);

  const setRangeValue = () => {
    const range = document.querySelector("input");

    range.value = 50;
    range.dispatchEvent(new Event("change", { bubbles: true }));
  };

  return (
    <div className="App">
      <h1>Current Value: {currentValue}</h1>

      <input
        type="range"
        min={0}
        max={100}
        step={10}
        onChange={e => {
          console.log("Change!");
          setCurrentValue(+e.target.value);
        }}
        defaultValue={0}
      />

      <button onClick={setRangeValue}>Set current value to 50</button>
    </div>
  );
};

И вот он (не) работает в CodeSandbox: https://codesandbox.io/s/divine-resonance-rps1n

ПРИМЕЧАНИЕ:

Просто для прояснить. Моя настоящая проблема связана с тестированием моего компонента с помощью библиотеки jest / реагирующего тестирования. Демонстрация кнопок - это просто хороший способ визуализировать проблему, не вдаваясь в необходимость дублировать все мои тестовые данные.

    const getMessage = (value, message) => {
        const slider = getByRole('slider');
        fireEvent.change(slider, { target: { value } });
        slider.dispatchEvent(new Event('change', { bubbles: true }));
        return getByText(message).innerHTML;
    };

Когда fireEvent меняет значение, он не запускает onChange события, прикрепленные к входу. Это означает, что getByText(message).innerHTML неверно, так как оно будет обновляться только тогда, когда вызов ловушки будет вызван onChange. (Все это работает при ручном щелчке / перетаскивании ползунка ввода, я просто не могу «проверить» его)

Любая помощь будет отличной!

Answer 1

Проблема в том, что React имеет виртуальный DOM, который не подключается напрямую к DOM. Обратите внимание, что события из React являются SyntheticEvents. Они не являются фактическим событием от DOM. https://github.com/facebook/react/issues/1152

Если это для модульного теста, создайте отдельный компонент для ползунка и текста и убедитесь, что они работают как положено, отдельно друг от друга с подпорками.

Для более подробной статьи о том, как конкретно протестировать бегунок диапазона, оформите https://blog.bitsrc.io/build-and-test-sliders-with-react-hooks-38aaa9422772

Удачи вам!