DOM-тестирование: проверка отрисовки и реакции на события

Почему тестировать DOM — это круто? 🎯

DOM-тестирование — это не просто проверка кода, а искусство предсказывать поведение интерфейса. Если твой компонент рендерится, но кнопка не реагирует на клик — пользователь уйдёт. А мы так не играем!

💡 Совет: DOM-тесты — это "живые" тесты. Они имитируют реальные действия пользователя: клики, ввод текста, наведение курсора.

Инструменты: что в твоём арсенале? 🛠️

Для тестирования DOM в JavaScript чаще всего используют: - Jest — для запуска тестов и ассертов. - Testing Library (@testing-library/dom или React/Vue-версии) — для работы с DOM.

Установка:

npm install --save-dev jest @testing-library/dom

Тест №1: Проверяем, что элемент есть на странице 🕵️‍♂️

Допустим, у нас есть компонент кнопки:

<button id="magic-button">Нажми меня</button>

Пишем тест:

import { screen } from '@testing-library/dom';

test('Кнопка отображается на странице', () => {
  document.body.innerHTML = '<button id="magic-button">Нажми меня</button>';

  const button = screen.getByText('Нажми меня');
  expect(button).toBeInTheDocument();
});

Разберём: - screen.getByText() ищет элемент по тексту. - toBeInTheDocument() — матчер из Jest, проверяет наличие элемента.

Тест №2: Реакция на события 🔥

Теперь проверим, что при клике вызывается функция:

const button = document.getElementById('magic-button');
button.addEventListener('click', () => {
  button.textContent = 'Успех!';
});

Тест:

import { fireEvent } from '@testing-library/dom';

test('Кнопка меняет текст при клике', () => {
  document.body.innerHTML = '<button id="magic-button">Нажми меня</button>';
  const button = document.getElementById('magic-button');

  button.addEventListener('click', () => {
    button.textContent = 'Успех!';
  });

  fireEvent.click(button);
  expect(button.textContent).toBe('Успех!');
});

Ключевые моменты: - fireEvent.click() имитирует клик. - Проверяем изменение textContent после события.

Тест №3: Работа с формами 📝

Пример формы:

<input type="text" id="username" />
<button id="submit">Отправить</button>
<div id="message"></div>

Логика:

document.getElementById('submit').addEventListener('click', () => {
  const username = document.getElementById('username').value;
  document.getElementById('message').textContent = `Привет, ${username}!`;
});

Тест:

test('Форма выводит приветствие', () => {
  document.body.innerHTML = `
    <input type="text" id="username" />
    <button id="submit">Отправить</button>
    <div id="message"></div>
  `;

  const input = document.getElementById('username');
  const button = document.getElementById('submit');
  const message = document.getElementById('message');

  button.addEventListener('click', () => {
    message.textContent = `Привет, ${input.value}!`;
  });

  // Имитируем ввод текста и клик
  input.value = 'Данила';
  fireEvent.click(button);

  expect(message.textContent).toBe('Привет, Данила!');
});

Лайфхаки для эффективных тестов 🧠

Используй data-testid
Вместо поиска по классам или ID, добавляй специальные атрибуты: html <button data-testid="submit-button">OK</button> И в тесте: javascript const button = screen.getByTestId('submit-button');
Проверяй отсутствие элементов
Иногда важно убедиться, что элемента нет: javascript expect(screen.queryByText('Удалённый элемент')).toBeNull();
Тестируй accessibility
Используй @testing-library/jest-dom для проверки ARIA-ролей: javascript expect(button).toHaveAttribute('aria-disabled', 'true');

Что дальше? 🚀

Попробуй Jest Snapshots для проверки структуры DOM.
Изучи userEvent из Testing Library — более продвинутая альтернатива fireEvent.
Для глубокого погружения посмотри разборы Данилы Бежина по тестированию React-компонентов.

DOM-тестирование — это мощь, контроль и уверенность. Пиши тесты, и твой код станет непоколебимым! 💪