使用userevent.keyboard（）测试不通过，但是它可以在浏览器中工作

发布于 2025-01-29 17:02:05 字数 1108 浏览 2 评论 0原文

我有以下使用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();
  });

但是，它失败了。 标题几乎像包装器一样行动，所有逻辑都包含在搜索中。这是代码

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。为什么？

原文

I have the following test written with React Testing library. When I check it out in the browser, it works. However, here it doesn't work. What can be wrong?

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

However, it fails.
Header acts almost like a wrapper, all the logic is contained in Search.
Here's the code

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
It works with userEvent 13, but it doesn't with 14. Why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

堇色安年 2025-02-05 17:02:05

它看起来像是版本14的键盘的问题。
我真的不知道为什么会发生这种情况，但是我会尝试以后再看它，甚至在testing-library/user-event github上打开问题。

但是目前，您可以使用此测试来完成此测试：

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 event。

您可以检查一个示例在这里 - ＆gt;只需单击测试选项卡即可。

It looks like an issue with keyboard for version 14.
I really dont know why this occuring but i will try to look depper into this later or even open a issue on testing-library/user-event github.

But for now, you can accomplish this test with this:

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

So, i just call {enter} from type event.

You can check an example here -> Just click on Tests Tab.

回复收藏 0 原文

~没有更多了~