Горячие клавиши и combination клавиши

Горячие клавиши и комбинации клавиш играют важную роль при разработке и тестировании React-приложений. Они позволяют эмулировать пользовательское взаимодействие с интерфейсом без необходимости прямого клика мышью. В контексте React Testing Library (RTL) это означает возможность имитации нажатий клавиш на элементах, что критично для проверки поведения компонентов, управляемых с клавиатуры.

Симуляция нажатий клавиш

В RTL основной инструмент для работы с клавиатурой — утилита fireEvent и более современный userEvent из пакета @testing-library/user-event.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

test('симуляция нажатия клавиши Enter', async () => {
  render();
  const input = screen.getByRole('textbox');

  await userEvent.type(input, '{enter}');
  expect(screen.getByText('Отправлено')).toBeInTheDocument();
});

Ключевые моменты:

  • {enter}, {tab}, {backspace} и другие специальные клавиши заключаются в фигурные скобки.
  • userEvent.type автоматически эмулирует фокус и последовательность событий (keydown, keypress, input, keyup).

Использование комбинаций клавиш

Комбинации клавиш (например, Ctrl + S или Shift + Tab) требуют указания модификаторов. userEvent.keyboard позволяет передавать такие комбинации через синтаксис с модификаторами [ и ].

test('комбинация Ctrl + A выделяет текст', async () => {
  render();
  const input = screen.getByRole('textbox');

  input.focus();
  await userEvent.keyboard('[Control>a]');
  
  expect(input.selectionStart).toBe(0);
  expect(input.selectionEnd).toBe(input.value.length);
});

Модификаторы, поддерживаемые RTL:

  • Control (Ctrl)
  • Shift
  • Alt
  • Meta (Cmd на macOS)

Синтаксис [Modifier1+Modifier2+Key] позволяет эмулировать одновременное нажатие нескольких клавиш.

Последовательность событий при нажатии

При симуляции клавиш важно понимать, какие события создаются:

  1. keydown — срабатывает при нажатии клавиши.
  2. keypress — срабатывает для символов (не для модификаторов).
  3. input — обновление значения элемента или