React Jest测试中使用userEvent替换输入框值的方法（解决type方法追加值问题）

嘿，我完全懂你碰到的这个困扰——用userEvent.type()的时候，新输入的内容总是会追加到输入框现有值后面，试了{backspace}和{selectall}这些令牌也没效果，对吧？不用慌，这里有几个靠谱的解决办法：

• 方法一：使用官方推荐的userEvent.clear()（推荐）
  如果你用的是@testing-library/user-event v14及以上版本，官方提供了专门清空输入框的clear()方法，完全模拟真实用户清空输入的操作，之后再用type()就能直接替换值了：

  await userEvent.clear(input);
  await userEvent.type(input, "123"); // 输入框最终值就是123
  

• 方法二：用{selectall}令牌配合输入
  有些情况下，你可以先选中输入框内的全部内容，再输入新值来覆盖。如果之前这个方法没生效，大概率是你的userEvent版本较旧，建议升级到最新稳定版再试试：

  await userEvent.type(input, "{selectall}123");
  // 先选中现有内容，再输入新值完成替换
  

• 方法三：手动重置输入框值并触发事件
  就是你自己尝试过的手动设置input.value的方式，不过要记得触发change事件，确保组件能感知到值的变化，避免测试出现异常：

  import { fireEvent } from '@testing-library/react';
  
  input.value = "";
  fireEvent.change(input); // 触发change事件同步组件状态
  await userEvent.type(input, "123"); // 现在输入的123就是唯一值了
  

总的来说，优先用userEvent.clear()，这是最贴合真实用户操作逻辑、也最不容易出问题的方案。

备注：内容来源于stack exchange，提问作者Code Spirit