使用 userEvent.keyboard() 进行的测试未通过，但它可以在浏览器中运行

Question

我用 React 测试库编写了以下测试。当我在浏览器中检查它时，它有效。然而，在这里它不起作用。有什么问题吗？

  it('Calls search callback on enter key press', () => {
    const mockSearchCallback = jest.fn();

    render(<Header onSearch={mockSearchCallback} />);

    userEvent.type(screen.getByRole('textbox'), 'testquery');

    userEvent.keyboard('{Enter}');

    expect(mockSearchCallback).toHaveBeenCalled();
  });

然而，它失败了。 Header其行为几乎就像一个包装器，所有逻辑都包含在搜索中。这是代码

export default function Search({ onSearch }: SearchProps) {
  const [query, setQuery] = useState('');

  const handleSubmit: React.FormEventHandler = (e) => {
    e.preventDefault();

    if (query) {
      onSearch(query);
    }
  };

  return (
    <form className="c-search" onSubmit={handleSubmit}>
      <input
        className="c-search__input"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        name="query"
        autoComplete="off"
      ></input>
    </form>
  );
}

UPD 它适用于 userEvent 13，但不适用于 14。为什么？

Answer 1

它看起来像是版本 14 的问题。keyboard我真的不知道为什么会发生这种情况，但我稍后会尝试深入研究这个问题，甚至在testing-library/user-eventgithub 上提出一个问题。

但现在，您可以通过以下方式完成此测试：

it("Calls userEvent.type", async () => {
    const mockSearchCallback = jest.fn();

    render(<Header onSearch={mockSearchCallback} />);

    const inputEl = screen.getByRole("textbox");

    await userEvent.type(inputEl, "testquery{enter}");

    expect(inputEl).toBeInTheDocument();
    expect(inputEl).toHaveValue("testquery");

    expect(mockSearchCallback).toHaveBeenCalledTimes(1);
  });

所以，我只是{enter}从type活动中打电话。

您可以在此处查看示例-> 只需单击“测试”选项卡。