如何使用@testing-library/user-event 版本 14 在 React 中测试 `onKeyDown` 道具？

Question

我正在使用 React 创建菜单项列表。我想测试当用户点击或按下项目上的回车键时，onSelect 道具被调用。

这是我的组件的简化版本：

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>
  );
};

这是我的测试：

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);
    });
  });

当运行测试时，我得到以下输出：

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 时调用了 onSelect？

Answer 1

来自documentation

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

fireEvent.keyDown(domNode, {key: 'A', code: 'KeyA'})

Answer 2

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

The keyboard API allows to simulate interactions with a keyboard. It accepts a string describing the key actions.

await user.keyboard('[Enter]')

KeyboardEvent.keyCode 已弃用。
因此我们不支持它并鼓励您更新您的实现以使用 non-deprecated 功能，例如 KeyboardEvent.key 或 KeyboardEvent.code.

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

如何使用@testing-library/user-event 版本 14 在 React 中测试 `onKeyDown` 道具？

How can I test `onKeyDown` prop in React with @testing-library/user-event version 14?

javascript

reactjs

react-testing-library