E2E测试中通过JS设置input值时useState不更新如何解决？

原因说明 #

React 受控组件的状态同步依赖input、change等原生事件回调，直接修改DOM的value属性不会触发React绑定的事件监听，因此对应的useState不会自动更新。

解决方案 #

方案1：手动触发事件（适用于普通场景） #

直接在赋值后手动触发输入事件即可让React同步感知到值的变化，代码示例如下：

const inputEl = document.getElementById("textfield");
// 赋值
inputEl.value = "test";
// 触发input事件，触发React状态同步
inputEl.dispatchEvent(new Event("input", { bubbles: true }));
// 有表单提交、失焦校验等场景可额外触发change事件
inputEl.dispatchEvent(new Event("change", { bubbles: true }));

方案2：模拟逐字符输入（适用于带输入校验、防抖逻辑的组件） #

如果目标输入框有逐字符校验、输入防抖等逻辑，可使用逐字符输入触发事件的方式模拟真实用户操作：

const inputEl = document.getElementById("textfield");
const inputText = "test";

inputEl.focus();
for (let char of inputText) {
  inputEl.value += char;
  // 逐字符触发input事件
  inputEl.dispatchEvent(new InputEvent("input", {
    bubbles: true,
    data: char
  }));
  // 若有防抖需求可取消下方注释，添加输入间隔
  // await new Promise(res => setTimeout(res, 30));
}
inputEl.dispatchEvent(new Event("change", { bubbles: true }));

内容的提问来源于stack exchange，提问作者Maurice