Клики и активация элементов: click, dblClick

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

Симуляция клика: click

Метод click используется для имитации одиночного клика на элементе. Он является основной точкой взаимодействия с кнопками, ссылками, чекбоксами, радиокнопками и другими интерактивными элементами.

Синтаксис:

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

test('клик по кнопке вызывает функцию', () => {
  const handleClick = jest.fn();
  render(<button onCl ick={handleClick}>Нажми меня</button>);

  const button = screen.getByText('Нажми меня');
  fireEvent.click(button);

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

Ключевые моменты при использовании click:

  1. click инициирует события мыши по цепочке:

    • mousedown → focus → mouseup → click.

  2. Для элементов, поддерживающих фокус, клик автоматически устанавливает фокус на элемент.

  3. Можно комбинировать с userEvent для более реалистичной имитации, например, с учетом задержки между кликами.

Двойной клик: dblClick

Метод dblClick предназначен для имитации двойного клика мышью. Он особенно полезен при тестировании элементов с событиями onDoubleClick.

Синтаксис:

test('двойной клик изменяет текст', () => {
  const handleDoubleClick = jest.fn();
  render(<div onDoubleCl ick={handleDoubleClick}>Двойной клик</div>);

  const div = screen.getByText('Двойной клик');
  fireEvent.dblClick(div);

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

Особенности dblClick:

  • Событие dblClick автоматически генерирует два последовательных события click и одно dblclick.
  • Это позволяет тестировать как обработку одиночного клика, так и двойного клика отдельно.
  • Для точного контроля часто используют jest.fn() и проверяют количество вызовов для каждого события.

Различия между click и dblClick

Параметр click dblClick
Количество вызовов 1 1 (но генерирует два click)
События мыши mousedown, focus, mouseup, click mousedown, mouseup, click, mousedown, mouseup, click, dblclick
Использование Стандартные интерактивные действия Элементы с onDoubleClick или специальные действия
Фокус Автоматически устанавливает Автоматически устанавливает

Тестирование интерактивных компонентов

Кнопки и кликабельные блоки можно тестировать на нескольких уровнях:

  1. Проверка вызова функции обработчика:
const handleClick = jest.fn();
fireEvent.click(button);
expect(handleClick).toHaveBeenCalled();
  1. Проверка изменения состояния:
function ToggleButton() {
  const [on, setOn] = React.useState(false);
  return <button onCl ick={() => setOn(prev => !prev)}>{on ? 'Вкл' : 'Выкл'}</button>;
}

test('клик переключает состояние', () => {
  render(<ToggleButton />);
  const button = screen.getByText('Выкл');
  fireEvent.click(button);
  expect(button.textContent).toBe('Вкл');
});
  1. Сложные сценарии с двойным кликом:
function Counter() {
  const [count, setCount] = React.useState(0);
  return <div onDoubleCl ick={() => setCount(prev => prev + 2)}>{count}</div>;
}

test('двойной клик увеличивает счетчик на 2', () => {
  render(<Counter />);
  const counter = screen.getByText('0');
  fireEvent.dblClick(counter);
  expect(counter.textContent).toBe('2');
});

Практические рекомендации

  • Для одиночных кликов и простых действий достаточно fireEvent.click.
  • Для более реалистичного поведения, учитывающего задержки и порядок событий, предпочтительно использовать userEvent.click из @testing-library/user-event.
  • Двойной клик следует тестировать отдельно, особенно если компонент различает одиночное и двойное нажатие.
  • Проверять результат клика лучше не только через вызов функции, но и через видимые изменения DOM или состояние компонентов.
  • Избегать тестирования внутренних реализаций, концентрируясь на поведении с точки зрения пользователя.

Особенности работы с формами и ссылками

  • Клик по <input type="checkbox"> изменяет состояние checked.
  • Клик по <a> не вызывает реального перехода при рендеринге в тестах; для тестирования навигации используют MemoryRouter или мок navigate.
  • Двойной клик на <textarea> или <input> может выделять текст, но в тестах достаточно проверить вызов onDoubleClick.

События в цепочке

Важно помнить, что клик не ограничивается одним событием. Внутри fireEvent.click(element) автоматически выполняется:

  1. mousedown
  2. focus (если элемент может быть сфокусирован)
  3. mouseup
  4. click

Для dblClick порядок расширяется:

  1. Первый mousedown → focus → mouseup → click
  2. Второй mousedown → mouseup → click
  3. dblclick

Такое понимание позволяет корректно тестировать сложные интерактивные сценарии, особенно в компонентах с разной логикой на одиночный и двойной клик.

Хотите, могу дополнительно написать раздел разница между fireEvent и userEvent для кликов и двойных кликов с примерами реальных приложений React. Это сильно расширяет понимание взаимодействия с элементами.

Оглавление