Using userEvent to simulate keydown on Document

Question

Is it possible to achive this fireEvent.keyDown(document, { key: '/' }); with userEvent?

This test passes:

test('is visible after pressing `/`', () => {
  render( < App / > );

  fireEvent.keyDown(document, {
    key: '/'
  });

  const input = screen.getByRole('textbox');

  expect(input).toBeVisible();
});

But when I try to do the same with userEvent:

test('is visible after pressing `/`', () => {
  render( < App / > );

  // Note: I'm not using `userEvent.type` because you can't type on `document`. Also, using `await` doesn't make the test pass.
  userEvent.keyboard('/')

  const input = screen.getByRole('textbox');

  expect(input).toBeVisible();
});

The test fails.

@SlavaKnyazev Like this: codepen.io/alexcheninfo/pen/yLqjoor?editors=0010 — wyc
– wyc, Commented Jan 26, 2023 at 2:46

Slava Knyazev · Accepted Answer · 2023-01-25 16:55:59Z

1

The / has a special meaning with keyboard: to release a held key.

Try escaping it: userEvent.keyboard('\/')

answered Jan 25, 2023 at 16:55

Slava Knyazev

6,0991 gold badge27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wyc Over a year ago

Thanks, but I tried userEvent.keyboard('\/') and await userEvent.keyboard('\/'). The test still fails.

ggorlen Over a year ago

I'm confused--the test fails but the answer was accepted? What was the fix or did this work after all?

Collectives™ on Stack Overflow

Using userEvent to simulate keydown on Document

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related