Debugging: screen.debug(), screen.logTestingPlaygroundURL()

В процессе тестирования компонентов React с использованием React Testing Library отладка занимает ключевое место. Иногда важно не просто знать, прошёл ли тест, а увидеть состояние DOM в момент выполнения, чтобы понять, почему тест падает или возвращает неожиданный результат. Для этого предоставляются методы screen.debug() и screen.logTestingPlaygroundURL(). Они позволяют визуализировать DOM и упрощают поиск ошибок в тестах.

screen.debug()

Метод screen.debug() выводит текущее состояние виртуального DOM в консоль. Его основное назначение — предоставить текстовое представление дерева элементов, которое доступно через screen.

Синтаксис:

screen.debug(element?, maxLength?)
  • element (необязательный) — конкретный элемент, который нужно вывести. Если не указан, выводится весь DOM.
  • maxLength (необязательный) — максимальная длина выводимого текста. Полезно для больших деревьев DOM, чтобы не перегружать консоль.

Примеры использования:

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

test('отображение профиля пользователя', () => {
  render(<UserProfile name="Анна" age={25} />);
  
  // Вывод всего DOM
  screen.debug();
  
  // Вывод конкретного элемента
  const nameElement = screen.getByText('Анна');
  screen.debug(nameElement);
});

Особенности и рекомендации:

  1. screen.debug() полезен на ранних этапах написания тестов для проверки структуры компонента.
  2. Позволяет быстро увидеть, какие элементы доступны для поиска через getBy* или queryBy*.
  3. Не влияет на выполнение теста — это чисто инструмент для разработчика.

screen.logTestingPlaygroundURL()

Метод screen.logTestingPlaygroundURL() интегрирован с инструментом Testing Playground. Он генерирует ссылку, которая открывает визуальный интерфейс для анализа текущего DOM и автоматической генерации селекторов для тестов.

Синтаксис:

screen.logTestingPlaygroundURL()

Пример использования:

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

test('отображение задач', () => {
  render(<TodoList items={['Купить молоко', 'Позвонить другу']} />);
  
  // Ссылка на Testing Playground
  screen.logTestingPlaygroundURL();
});

После выполнения теста в консоли появится URL, который можно открыть в браузере. Он покажет DOM компонента и предложит оптимальные селекторы, например:

  • getByRole('listitem', { name: /Купить молоко/i })
  • getByText(/Позвонить другу/i)

Преимущества использования:

  1. Быстрое нахождение подходящих селекторов без ручного перебора.
  2. Снижение риска использования нестабильных селекторов, таких как querySelector.
  3. Возможность визуально сравнивать состояние DOM и тестировать выборки элементов.

Практические сценарии

1. Отладка сложного компонента

render(<ComplexComponent />);
screen.debug();

Если тест падает из-за отсутствующего элемента, debug() показывает все доступные элементы и их тексты, что позволяет выявить проблему.

2. Генерация селекторов для новых компонентов

render(<Form />);
screen.logTestingPlaygroundURL();

Открыв ссылку в браузере, можно увидеть все формы, кнопки и поля ввода, и сразу сгенерировать правильные getBy* запросы.

3. Комбинация методов

Для детальной отладки иногда удобно использовать оба метода:

render(<Dashboard />);
screen.debug(); // просмотр всей структуры DOM
screen.logTestingPlaygroundURL(); // генерация URL для анализа и селекторов

Полезные советы

  • screen.debug() хорошо подходит для локальной разработки тестов, а logTestingPlaygroundURL() — для генерации надежных селекторов.
  • Не оставлять эти вызовы в финальных CI/CD тестах, чтобы не захламлять логи.
  • Использовать селекторы из Testing Playground вместо поиска по классу или id, чтобы тесты были более устойчивыми к изменениям структуры DOM.
  • maxLength в screen.debug(maxLength) полезен для очень больших компонентов, чтобы вывод оставался читаемым.

screen.debug() и screen.logTestingPlaygroundURL() значительно ускоряют процесс написания и отладки тестов, упрощают выбор правильных селекторов и делают тесты более надежными, особенно в сложных интерфейсах React.

Оглавление