userEvent.type断言输入为空后输入新值时旧字符重现问题
问题根本原因
该异常是@testing-library/user-event的内部状态追踪机制和组件自主更新逻辑不同步导致的,和组件本身的业务逻辑无关:
- 调用
userEvent.type()输入内容时,工具不会在每次输入操作前读取input DOM节点的真实value,而是在内部维护一份独立的输入内容缓存,默认只有通过userEvent自身提供的API触发的输入修改,才会更新这份缓存。 - 按下回车键后触发的清空输入框逻辑,是组件通过React状态更新/DOM操作直接把input值设为空,整个过程没有经过
userEvent的API调用,所以工具内部的缓存没有被同步更新,仍然保留着之前输入的test 1。 - 后续再次调用
userEvent.type()输入test 2时,工具会直接读取内部缓存的旧值test 1,和本次要输入的内容拼接后再设置到input节点上,最终就出现了旧值“复活”、实际值为test 1test 2的现象。 - 真实浏览器环境下不存在这层额外的工具缓存,所有输入操作都是基于DOM节点的实时value执行,所以在页面可视化验证时交互完全正常。
相关说明
调用clear()方法能规避问题,本质是因为clear()是userEvent自身提供的API,执行时除了清空DOM上的输入值,还会同步重置内部维护的内容缓存,后续输入就会从空值开始拼接,不会再带出旧内容。
注意:单纯写断言校验输入框值为空,只会读取DOM的实时值做校验,不会同步更新userEvent的内部缓存,无法解决这个不同步问题。
内容的提问来源于stack exchange,提问作者lanxion
相关产品推荐
相关产品推荐

