Как Jest работает под капотом и чем jsdom отличается от браузера?

Как Jest устроен внутри и чем jsdom отличается от браузера

• Jest — JavaScript-тест-раннер, поддерживающий моки и изолированный запуск тестов
• Для проверки DOM он применяет jsdom — эмулятор браузерной среды, работающий в Node.js
• jsdom разбирает HTML и CSS, а также воспроизводит DOM API, но не выполняет настоящий визуальный рендеринг
• В отличие от браузеров с полноценными движками (Blink, Gecko), jsdom не отображает страницу и реализует CSS лишь частично
• Благодаря меньшему весу и высокой скорости jsdom удобен для unit-тестов компонентов, взаимодействующих с DOM
• Браузерная среда предоставляет полный набор API и поведение реального рендера, поэтому необходима для e2e- и интеграционных тестов
• Для запуска тестов с настоящим браузерным рендерингом Jest можно связать с Puppeteer/Playwright
• Применение jsdom уменьшает зависимость от конкретного окружения, ускоряет CI/CD и облегчает конфигурацию

Итог: Jest использует jsdom как быструю изолированную имитацию браузера, однако такая среда не воссоздаёт полностью поведение браузера и его механизм рендеринга.

Подробный ответ

Основной ответ

Jest — распространённый JavaScript-тест-раннер, который сразу предоставляет удобную среду для unit- и integration-тестов. Фактически тесты выполняются в Node.js, а браузерное окружение моделируется с помощью jsdom — лёгкой JavaScript-реализации DOM API. В отличие от реального браузера, jsdom воспроизводит только DOM и отдельные элементы браузерного поведения. Поэтому тесты запускаются быстро, изолированно и без открытия настоящего браузера.

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

• jsdom воссоздаёт браузерный DOM внутри Node.js, однако не предоставляет полноценный рендеринг, CSS и сложный JS движок. По сути, это набор API для работы с элементами, событиями и навигацией.
• По сравнению с настоящим браузером, например Chrome, jsdom не реализует многие современные веб-API, включая Canvas, WebGL, WebRTC и сложные события. Кроме того, он не выполняет настоящий layout/rendering, поэтому результаты отдельных UI-тестов могут отличаться.
• Jest по умолчанию упрощает конфигурацию, предлагая виртуальную среду jsdom. Когда требуется тестирование в настоящем браузере, применяют такие инструменты, как Puppeteer или Playwright, чтобы получить максимальную Fidelity.

Практический контекст

jsdom оптимален для unit-тестов React-компонентов, в которых важна корректная работа с DOM-структурой, но визуальное отображение не является критичным. С его помощью можно быстро запускать сотни тестов с небольшой задержкой (~10-50ms). Если же приложение необходимо проверять в условиях реального браузера — например, из-за сложных CSS-анимаций или Web API, — следует подключить браузерные среды через end-to-end фреймворки.