时间戳

首页 > 解决方案 > 在 Jest / jsdom / React 测试库中触发键盘事件未按预期工作

reactjs - 在 Jest / jsdom / React 测试库中触发键盘事件未按预期工作

问题描述

我一起模拟了一个小例子 - 单击按钮 1，然后显示另外 2 个按钮。

我可以通过点击测试这个旅程非常好 - 但是，当我尝试测试按钮上的 Enter 按键时，似乎什么都没有发生，即使事情正在按预期使用我放置在测试中的事件侦听器登录控制台.

我在这里用代码创建了一个沙箱： https ://codesandbox.io/s/gifted-beaver-uetbm?file=/src/ tests /app.js


it('should display additional buttons when "Button 1" has been pressed via keyboard', () => {
    const {button1, button2} = renderApp()

    button1.addEventListener('keydown', () =>
      console.log('Button 1 has been pressed - keydown'),
    )

    fireEvent.keyDown(button1, {
      key: 'Enter',
      code: 13,
      charCode: 13,
      keyCode: 13,
    })

    expect(button2).toBeVisible()
});

我可以通过添加一个道具来强制它在我的组件中工作onKeyPress，但这感觉就像为了通过测试而复制代码 - 而且我不喜欢它在浏览器中作为标准工作时的想法？


<button
        onClick={() => setShowButtons(!showButtons)}
        // this works, but I don't think I should be duplicating code to appease tests?
        // onKeyDown={e => e.keyCode === 13 && setShowButtons(!showButtons)}
      >
        Button 1
</button>

似乎被触发的事件正在明确地寻找它们所关联的事件，而不是副产品 - 例如在按钮上按下 enter 并期望触发 click 事件。不管这是标准的浏览器行为吗？也许我错了？

我真的很难过 - 我觉得这应该有效吗？任何帮助都会很棒！谢谢

标签： reactjsjestjskeyboard-eventsjsdom

解决方案

你需要把你expect的waitFor(() => expect(button2).toBeVisible())

推荐阅读