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

【问题标题】：Firing keyboard events not working as expected in Jest / jsdom / React Testing Library在 Jest / jsdom / React 测试库中触发键盘事件未按预期工作
【发布时间】：2020-07-16 15:05:17
【问题描述】：

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

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

【问题讨论】：

标签： reactjs jestjs keyboard-events jsdom

【解决方案1】：

您需要将您的 expect 包装在 waitFor(() => expect(button2).toBeVisible()) 中

【讨论】：

这在这个例子中令人沮丧！然而，我的实际代码中确实有 waitFor ，但它仍然失败 - 所以我想现在还有别的东西！回到绘图板！谢谢你的回答:)
也可能是您正在渲染组件、查询和缓存按钮元素，然后对这些元素进行断言。在您执行keydown 事件之后可能值得查询button2。见testing-library.com/docs/react-testing-library/…。此外，查询这些内容的更惯用方式是 screen.getByRole('button', { name: /button 2/i })，这可确保您使用可访问按钮角色进行检查，而不仅仅是页面上的任何文本。