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

oxiaedzo 于 2023-02-15 发布在 React

关注(0)|答案(1)|浏览(147)

我尝试使用@testing-library/react&@testing-library/jest-dom测试一个数字输入组件，但我还不知道如何测试触发输入的上/下旋转按钮。

test("renders and updates NumberInput", () => {
   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}
   />);

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

   fireEvent.change(element, { target: { value: "10" }});

   expect(value).toEqual("10");
});

如何测试触发向上/向下旋转按钮？

reactjs

来源：https://stackoverflow.com/questions/75438135/how-to-trigger-up-down-number-input-spin-buttons-in-jest-react-testing

1条答案

按热度按时间

v8wbuo2f1#

虽然我不知道如何模拟点击按钮，但我知道如何测试step和min prop 与userEvent.keyboard的配合使用，这将触发输入的向上/向下事件，在我的例子中，这与点击向上/向下微调按钮相同。

userEvent.click(element).then(() => {
   expect(element).toHaveFocus();

   userEvent.keyboard('[ArrowDown]').then(() => {
      expect(value).toEqual("9.5");
   });
});

赞(0）回复(0）举报 2023-02-15

我来回答

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

1条答案

相关问题

热门标签

最新问答