React Jest单元测试number输入框调用userEvent.type不生效问题

问题复现场景 #

编写测试用例校验两类输入框的输入逻辑：

• text类型普通文本输入框
• number类型数字输入框

文本输入框测试逻辑运行无异常，代码如下：

textInput = getAllByPlaceholderText('name');
userEvent.type(textInput[0], 'username');

通过screen.debug()核验运行状态，上述代码可正常修改输入框value，符合预期。

数字输入框测试逻辑执行未达预期，对应代码如下：

numInput = getAllByRole('spinbutton');
userEvent.type(numInput[0], '1');

调试器检查结果显示，上述操作执行后输入框value未发生任何变化。公开渠道检索相关解决方案未找到有效参考，初步判断可能需要调整userEvent的调用方式——但实际业务场景中用户可直接在该输入框正常输入内容，理论上.type方法应当正常生效。

可行排查方案 #

按优先级依次排查调整即可：

1. 检查userEvent调用写法，适配v14+版本规范
   如果你使用的是v14及以上版本的@testing-library/user-event，直接从包入口导入userEvent调用type的旧写法存在兼容问题，对spinbutton角色的数字输入框会遗漏部分事件触发。需要先初始化user实例，且type方法为异步方法需要加await等待执行完成：

   // 替换旧的导入直接调用写法
   import { render, screen } from '@testing-library/react'
   import userEvent from '@testing-library/user-event'
   
   test('数字输入框测试', async () => {
     const user = userEvent.setup() // 先初始化实例
     // 其余渲染逻辑省略
     const numInput = screen.getAllByRole('spinbutton')[0]
     await user.type(numInput, '1') // 异步方法加await
     expect(numInput).toHaveValue(1)
   })
   

2. 替换输入模拟方法，绕开组件自定义事件拦截
   若调整写法后仍不生效，大概率是你用的组件库封装的数字输入框做了键盘事件拦截校验，直接调用type触发的事件序列不满足组件的校验规则，会被判定为非法输入不更新值。这种场景可以换用fill方法，直接模拟用户填充输入框的完整行为，不需要触发逐键敲击的事件序列：

   await user.fill(numInput, '1')
   

3. 校验元素获取准确性，避免拿到非输入节点
   部分组件库封装的数字输入框会在外层套div等容器节点，直接调用getAllByRole('spinbutton')可能拿到外层不可交互的容器节点，自然无法修改输入值。获取元素时增加过滤配置，确保拿到真实可聚焦的input节点：

   const numInputList = screen.getAllByRole('spinbutton', {
     hidden: false // 过滤掉不可见、不可交互的节点
   })
   

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