Как работают юнит-тесты в Jest для React компонентов без браузера? За счет чего это возможно?

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

Архитектура тестирования:

1. jsdom - эмулятор браузера:

• Реализация DOM API в Node.js

• Поддержка событий, селекторов, навигации

• Изолированная среда для каждого теста

2. Виртуальный DOM React:

• React тестирует компоненты в памяти

• Не требуется реальная отрисовка в браузере

• Быстрое создание и сравнение деревьев компонентов

Пример теста:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';

test('button click calls onClick handler', () => {
  const handleClick = jest.fn();
  
  // Рендер в jsdom
  render(<Button onClick={handleClick}>Click me</Button>);
  
  // Взаимодействие через эмулированные события
  userEvent.click(screen.getByText('Click me'));
  
  // Проверка результатов
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Преимущества подхода:

Скорость:

• Отсутствие overhead браузера

• Параллельное выполнение тестов

• Быстрая инициализация окружения

Надежность:

• Предсказуемая среда выполнения

• Отсутствие side effects между тестами

• Легкость отладки

Функциональность jsdom:

// jsdom предоставляет браузерные API
global.document; // Доступ к DOM
global.window;   // Объект window
global.navigator;// Навигатор (ограниченный)
global.location; // Location объекта

Ограничения:

• Нет реальной отрисовки на экране

• Ограниченные Web APIs

• Отсутствие визуальной проверки