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

Question

我一起模拟了一个小例子 - 单击按钮 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 并期望触发点击事件。不管这是标准的浏览器行为吗？也许我错了？

我真的很困惑 - 我觉得这应该有用吗？任何帮助都会很棒！谢谢

Answer 1

您需要将 expect 包裹在 waitFor(() => expect(button2).toBeVisible())

中

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

Firing keyboard events not working as expected in Jest / jsdom / React Testing Library

keyboard-events

jsdom

reactjs

jestjs