如何在Jest React测试中触发数字输入框的上下微调按钮

数字输入框的上下微调按钮（对应spinbutton角色）在浏览器中，点击操作本质上会触发ArrowUp/ArrowDown键盘事件来改变值，因此可以通过模拟这些键盘事件完成测试。

测试示例代码 #

test("renders and updates NumberInput with spin buttons", () => {
  let value = "5";
  const setValue = (e) => value = e.value;

  render(<NumberInput
    label="Quantity"
    name="quantity"
    value={value}
    onChange={setValue}
    step={0.5}
    min={0.05}
  />);

  const element = screen.getByRole('spinbutton');
  expect(element).toBeInTheDocument();

  // 模拟点击向上微调按钮（触发ArrowUp事件）
  fireEvent.keyUp(element, { key: 'ArrowUp' });
  expect(value).toEqual("5.5");

  // 模拟点击向下微调按钮（触发ArrowDown事件）
  fireEvent.keyUp(element, { key: 'ArrowDown' });
  expect(value).toEqual("5");

  // 测试最小值边界：达到最小值后向下微调不再变化
  value = "0.05";
  // 重新渲染组件更新受控值
  render(<NumberInput
    label="Quantity"
    name="quantity"
    value={value}
    onChange={setValue}
    step={0.5}
    min={0.05}
  />);
  const minElement = screen.getByRole('spinbutton');
  fireEvent.keyUp(minElement, { key: 'ArrowDown' });
  expect(value).toEqual("0.05");
});

关键说明 #

• 使用fireEvent.keyUp模拟ArrowUp/ArrowDown事件，这是浏览器处理微调按钮点击的原生逻辑映射。
• 若组件为受控组件，手动修改value后需要重新渲染组件，才能测试min/max这类边界场景。
• 确保组件正确处理step、min属性，否则模拟事件无法得到预期结果。

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