React Testing Library同一input连续调用userEvent.type未按预期生效

连续输入后值未更新的核心原因有两个：

• 第二次调用userEvent.type时没有清空输入框原有值，type默认会在输入框现有内容的末尾逐字符追加内容。输入过程中会产生大量不符合日期格式的中间值（例如原有值是11/07/2022，输入第一个字符后变成11/07/20221），如果你的组件在onChange事件里做了强校验，只要输入值不符合完整日期格式就不更新state、直接回退到上一次的合法值，后续所有输入都会被React受控组件的重置逻辑覆盖，最终停留在第一次输入的合法值上。
• 测试开头一次性获取了输入框的DOM引用，如果第一次输入完成后组件重渲染重建了输入框DOM，你持有的是已经脱离文档流的旧元素引用，后续对旧元素触发的输入事件不会被新的组件实例接收。
• 额外排查点：检查你提到的「重新输入第一个输入框时自动清空第二个输入框」的逻辑，确认没有误将第一个输入框的state也重置为旧值。

1. 模拟用户真实的修改操作，第二次输入前先清空原有内容，不要直接在合法值后追加输入，同时每次重渲染后重新获取最新的DOM引用：

// 第一次输入
let startDate = document.querySelector('#startDate') as HTMLInputElement;
await userEvent.type(startDate, '11/07/2022');

// 重新获取重渲染后的DOM引用
startDate = document.querySelector('#startDate') as HTMLInputElement;
// 先清空输入框，再输入新值
await userEvent.clear(startDate);
await userEvent.type(startDate, '11/07/2024');

// userEvent本身已经等待状态更新完成，不需要额外嵌套waitFor
expect(startDate).toHaveValue('11/07/2024');

如果不需要模拟逐字删除的操作，也可以用全选覆盖的写法：

await userEvent.type(startDate, '{selectall}11/07/2024');

2. 修复组件的校验逻辑问题：不要在onChange阶段拦截非法中间值，否则用户根本无法修改已经输入完成的合法日期——修改日期的过程必然会出现临时的非法字符串，正确的做法是允许输入过程中的临时值，在输入框失焦（blur）或者表单提交时再做格式校验、值修正。

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