我正在创建一个使用React的菜单项列表。我想测试的是,当用户单击或按enter时,就会调用onSelect支柱。
以下是我的组件的简化版本:
import React from "react";
export const Item = ({ children, onSelect }) => {
const onKeyDown = ({ keyCode }) => keyCode === 13 && onSelect();
return (
<div onClick={onSelect} onKeyDown={onKeyDown} tabIndex={0}>
{children}
</div>
);
};这是我的测试:
describe("Item", () => {
it("calls onSelect when user clicks on the item or presses Enter", async () => {
const user = userEvent.setup()
const onSelect = jest.fn();
const children = "Settings";
render(<Item onSelect={onSelect}>{children}</Item>);
const item = screen.getByText(children);
await user.click(item);
expect(onSelect).toHaveBeenCalledTimes(1);
await user.pointer({target: item, keys: '[Enter]'})
expect(onSelect).toHaveBeenCalledTimes(2);
});
});在运行测试时,我得到以下输出:
Item › calls onSelect when user clicks on the item or presses Enter
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 2
Received number of calls: 1
48 |
49 | await user.pointer({target: item, keys: '[Enter]'})
> 50 | expect(onSelect).toHaveBeenCalledTimes(2);
| ^
51 | });
52 | });
53 |当用户按Enter在item组件上时,我如何测试是否调用了onSelect?
发布于 2022-04-21 16:19:04
https://testing-library.com/docs/user-event/keyboard
keyboardAPI允许模拟与键盘的交互。它接受描述关键操作的string。
await user.keyboard('[Enter]')KeyboardEvent.keyCode被否决了。
因此,我们不支持它,并鼓励您更新您的实现,以使用非推荐的特性,如KeyboardEvent.key或KeyboardEvent.code。
https://codesandbox.io/s/crazy-snyder-gurptu?file=/src/Item.test.js
发布于 2022-04-21 12:54:32
来自文档
fireEvent.keyDown(domNode, {key: 'Enter', code: 'Enter', charCode: 13})
fireEvent.keyDown(domNode, {key: 'A', code: 'KeyA'})https://stackoverflow.com/questions/71954801
复制相似问题