userEvent.keyboard('{space}') does not work

[nkgrnkgr]

Reproduction example

https://codesandbox.io/s/quiet-butterfly-dcz8ld

Prerequisites

1. Render <button>button</button> and <div role='dialog'>dialog</div> .
2. Write test.

  render(<App />);

  const button = await screen.findByRole("button");
  button.focus();

  await userEvent.keyboard("{space}");

  const dialog = await screen.findByRole("dialog");

  expect(dialog).toBeInTheDocument();

Expected behavior

SpaceKey work, and can find a dialog element.

Actual behavior

SpaceKey does not work, and can not find a dialog element.

User-event version

14.2.0

Environment

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.39",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.3"
  },

Additional context

Enter key and Click button work!😄
But space key does not work🤔

[ph-fritsche]

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

You can describe the key

• per printable character: .keyboard(' ')
• per KeyboardEvent.key: .keyboard('{ }')
• per KeyboardEvent.code: .keyboard('[Space]')

[nkgrnkgr]

@ph-fritsche

Thank you.