首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我如何测试“`onKeyDown`”螺旋桨与@testing/user版本14的反应?

我如何测试“`onKeyDown`”螺旋桨与@testing/user版本14的反应?
EN

Stack Overflow用户
提问于 2022-04-21 12:51:22
回答 2查看 1.3K关注 0票数 0

我正在创建一个使用React的菜单项列表。我想测试的是,当用户单击或按enter时,就会调用onSelect支柱。

以下是我的组件的简化版本:

代码语言:javascript
运行
复制
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>
  );
};

这是我的测试:

代码语言:javascript
运行
复制
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);
    });
  });

在运行测试时,我得到以下输出:

代码语言:javascript
运行
复制
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

EN

Stack Overflow用户

回答已采纳

发布于 2022-04-21 16:19:04

https://testing-library.com/docs/user-event/keyboard

keyboard API允许模拟与键盘的交互。它接受描述关键操作的string

代码语言:javascript
运行
复制
await user.keyboard('[Enter]')

KeyboardEvent.keyCode被否决了。

因此,我们不支持它,并鼓励您更新您的实现,以使用非推荐的特性,如KeyboardEvent.keyKeyboardEvent.code

https://codesandbox.io/s/crazy-snyder-gurptu?file=/src/Item.test.js

票数 1
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71954801

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档