使用userEvent测试number输入框时上下箭头按键无响应问题排查

测试type为number的输入框时，按下键盘上下箭头期望实现数值增减，但实际操作后输入值无变化。相关测试代码如下：

it('renders current year', () => {
  render(
    <input
      type="number"
      step="1"
      name="number"
      placeholder="number"
      aria-label="number"
      defaultValue={0}
    />
  );
  const input = screen.getByPlaceholderText(/number/i);
  user.type(input, '{arrowup}');
  console.log(input);
  expect(input).toHaveValue(1);
});

问题原因 #

user.type()方法的设计目标是模拟连续输入文本的行为，无法正确处理上下箭头这类非文本输入的键盘控制按键。这类按键需要使用专门模拟键盘事件的user.keyboard()方法。

另外，userEvent的多数方法是异步执行的，直接同步调用会导致断言在事件处理完成前执行，也会引发结果不符合预期的问题。

修正后的代码 #

it('renders current year', async () => {
  render(
    <input
      type="number"
      step="1"
      name="number"
      placeholder="number"
      aria-label="number"
      defaultValue={0}
    />
  );
  const input = screen.getByPlaceholderText(/number/i);
  // 使用keyboard方法模拟箭头按键操作
  await user.keyboard('{arrowup}');
  expect(input).toHaveValue(1);
});

关键修改点 #

• 用user.keyboard()替代user.type()：keyboard()专门用于模拟各类键盘按键事件，包括控制键、功能键，适配上下箭头这类操作场景。
• 添加async/await：等待user.keyboard()的异步操作完成后再执行断言，确保事件处理流程结束后验证结果。
• 自动聚焦处理：user.keyboard()会自动将目标输入框设为聚焦状态，无需额外调用聚焦方法。

内容的提问来源于stack exchange，提问作者Wilson Medeiros Jr.