Fire React.ChangeEvent

fireReactChangeEvent.ts

export const fireReactChangeEvent = (
  element: HTMLInputElement | HTMLTextAreaElement,
  value: string | number
) => {
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    element.tagName.toLowerCase() === "input"
      ? HTMLInputElement.prototype
      : HTMLTextAreaElement.prototype,
    "value"
  )?.set;

  nativeInputValueSetter?.call(element, value);

  element.dispatchEvent(new Event("change", { bubbles: true }));
};

• 前提として、Reactのイベントはネイティブではないので、dispatchEventで発火できません。
• 通常のフォーム要素の操作でイベントが発火しないようなケースでは、この手法でもイベントは発火しません。例えば、hidden typeのinput要素に対してこのメソッドを使っても動作しません。
• React v15.5以下で動きません。
• v17.0.2で動作を確認しています。
• 自分で似たようなものを書きたい場合は、しばらくコミットされていませんがreact-trigger-changeの実装や、cypressに同じ仕組みがあるので参考にすると良いと思います。