React中Blueprint JS Hotkey Provider的Jest+RTL单元测试失败求助

我在使用Blueprint JS的HotkeysTarget2组件时，遇到了测试不生效的问题，以下是我的代码和测试用例：

组件代码 #

<HotkeysTarget2 hotkeys={hotkeys}>
  {({ handleKeyDown, handleKeyUp }) => (
     <div onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
       {/* 业务代码 */}
     </div>
  )}
</HotkeysTarget2>

Hotkeys 配置 #

{
  combo: "1",
  global: true,
  label: "Press button 1",
  onKeyUp: () => fillText("button 1 pressed"), // 用于填充输入框的函数
},

测试用例 #

describe("test", () => {
  it("should response when press button 1", () => {
    const inputField = screen.getByTestId("pressed-button");
    userEvent.keyboard("{1}");
    expect(inputField).toHaveDisplayValue("button 1 pressed")
  });
});

测试无法正常运行，请问该如何解决？

解决方案 #

• 确保全局快捷键监听生效
  HotkeysTarget2的global: true配置依赖组件已挂载且Blueprint全局快捷键管理器初始化完成。测试时需等待组件完全渲染后再触发键盘事件，可结合waitFor处理异步逻辑。

• 修正键盘事件触发方式
  userEvent.keyboard("{1}")的写法有误，直接使用userEvent.keyboard("1")即可。由于你的回调绑定在onKeyUp上，该方法会自动模拟按键按下再抬起的完整流程。

• 调整测试断言逻辑
  输入框的值更新可能存在异步延迟，改用waitFor包裹断言，同时增加初始值校验确保测试逻辑严谨：

  it("should response when press button 1", async () => {
    const inputField = screen.getByTestId("pressed-button");
    expect(inputField).toHaveDisplayValue(""); // 校验初始状态
    await userEvent.keyboard("1");
    await waitFor(() => {
      expect(inputField).toHaveDisplayValue("button 1 pressed");
    });
  });
  

• 确保容器可接收键盘事件
  给包裹的div添加tabIndex="0"使其成为可聚焦元素，避免测试环境中非聚焦元素无法响应键盘事件：

  <HotkeysTarget2 hotkeys={hotkeys}>
    {({ handleKeyDown, handleKeyUp }) => (
       <div tabIndex="0" onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
         {/* 业务代码 */}
       </div>
    )}
  </HotkeysTarget2>
  

• 检查HotkeysProvider是否存在
  全局快捷键需要在HotkeysProvider上下文环境中才能生效，测试时需用该Provider包裹组件：

  render(
    <HotkeysProvider>
      <YourComponent />
    </HotkeysProvider>
  );
  

内容的提问来源于stack exchange，提问作者yoga web dev