Тестирование фронтенда
2026-02-26 18:03 Diff
https://ru.hexlet.io/courses/frontend-testing-browser/lessons/jsdom/theory_unit

theme: gaia class:

  • lead
  • invert paginate: true

JSDOM

Hexlet

Проблематика

  • вам нужно окружение, позволяющее запускать браузер
  • тесты медленные

Что есть JSDOM

  • библиотека, которая анализирует и взаимодействует с собранным HTML так же, как браузер
  • jsdom - это чистая JavaScript-реализация многих веб-стандартов, в частности стандартов WHATWG DOM и HTML, для использования с Node.js
  • это не настоящий браузер, НО
  • она реализует веб-стандарты так же, как это делают браузеры

Подключение

Инициализация

Параметры

Скрипты в html

Запуск скриптов

  • resources: 'usable' - можно ли загружать ресурсы вроде js, css, изображения и пр.
  • runScripts: 'dangerously' - можно ли запускать скрипты

Флоу

Установка

Экземпляр JSDOM

Установка параметров

Установка window и document

Пишем тесты

А можно и так

Загрузка по URL

Альтернатива

Визуальная составляющая

  • jsdom не умеет рендерить визуальное содержание
  • не отображает верстку
    • вы не можете перетащить ползунок и проверить, что что-то изменилось
    • то же касается бесконечной прокрутки
    • или :hover, :active
    • и прочего

Виртуальные консоли

  • Сколько всего есть консолей?
    • 3
    • console.log из Node.js
    • Консоль страницы
    • Консоль jsdom
  • По умолчанию конструктор JSDOM вернет экземпляр с виртуальной консолью, который пересылает все свои данные в консоль Node.js
  • virtualConsole.sendTo(console);
  • особое событие jsdomError отображает:
    • Ошибки загрузки или парсинга ресурсов (скрипты, стили, фреймы, и i-фреймы)
    • Ошибки при выполнении скрипта, которые не видит обработчик событий window onerror, который возвращает true или вызывает event.preventDefault()
    • Не реализованные ошибки, возникающие в результате вызовов методов вроде window.alert, которого нет в jsdom, но который установлен для веб-совместимости
  • virtualConsole.sendTo(console, { omitJSDOMErrors: true });

Изменения перед парсингом

Это особенно полезно, если вы хотите каким-либо образом изменить среду, например, добавив адаптеры для API веб-платформы, которые jsdom не поддерживает

  • JSDOM.fromURL
  • JSDOM.fromFile
  • JSDOM.fragment
  • Поддержка canvas с помощью npm-пакета node-canvas
  • window.close() убивает window.setTimeout()
  • Запускайте в браузере, НО
  • используйте прокси

Подводные камни

  • Фундаментальное ограничение для асинхронной загрузки скриптов
  • Нет навигации
  • Нет верстки: getBoundingClientRects, offsetTop

Глобальные свойства

  • Мы используем navigator.userAgent.indexOf('Chrome') > -1 вместо window.navigator.userAgent.indexOf('Chrome') > -1

  • ReferenceError: navigator is not defined

jest-dom

  • Убирает дублирующийся код, добавляет абстракцию
    • аттрибуты
    • текст
    • css классы
    • и т.д.
  • Расширяет матчеры jest
  • Декларативность

Testing Library data-testid

eslint-plugin-jest-dom