说明:
我试图测试当用户按下“Enter”键时表单提交。我有一个关于按下Submit
按钮的通过测试,但我也想确保表单使用键盘提交(方便和a11y)。
编码:
test("should submit when pressing enter", () => {
const handleSubmit = jest.fn();
const { getByLabelText } = render(<App handleSubmit={handleSubmit} />);
const input = getByLabelText("Name:");
fireEvent.change(input, { target: { value: "abc" } });
fireEvent.keyPress(input, { key: "Enter", code: 13, charCode: 13 });
expect(handleSubmit).toHaveBeenCalled();
});
字符串
下面是一个CodeSandbox,它只需要最少的代码。
7条答案
按热度按时间mum43rcc1#
不太清楚交互的源代码是什么,但可以在
input
上调用submit
,并且它似乎修复了沙箱中的测试:字符串
vx6bjr1n2#
以下为我工作:
字符串
svujldwt3#
您可以按按钮提交,但事件目标将是按钮而不是表单。要解决此问题,请执行以下操作:
只有当表单具有可访问的名称时,才可以提交表单。在这个意义上,使用
role="my-form"
(ByRole)或aria-label="form's purpose"
(ByLabelText或ByRole(“form”))。字符串
mqxuamgl4#
我遵循了above的答案,但它对我不起作用,因为我使用
keydown
侦听器来检查我的输入。请记住,只使用
e.key
,而不是e.keyCode/e.which
和deperecated
。https://stackoverflow.com/a/4471635/8798220的字符串
ogsagwnx5#
我找到了一种方法,可以在不做任何更改或不添加新库的情况下强制执行它,如下所示
字符串
如果你够不到那个 prop 你也可以记录它
型
请注意,如果您尝试访问上面日志中显示的任何其他onKeyPress prop ,某些状态可能会丢失
mnemlml86#
为了模拟键盘显示/隐藏,我首先关注输入,然后模拟打字。通过这种方式,您可以触发
onSubmitEditing
事件来模拟键盘上按下的提交按钮。字符串
koaltpgm7#
您没有向
fireEvent.keyDown
事件传递正确的选项。尝试将keyCode: 13
与key: "enter"
沿着传递下面这段代码对我来说很有用
字符串