Вопросы для Junior Frontend собеседования: React и инструменты

Введение

Если вы уже можете объяснить основы HTML, CSS и JavaScript, следующий уровень junior frontend собеседования обычно касается React, ежедневных инструментов, производительности, отладки, доступности и базового тестирования. В этом руководстве 21 вопрос с опорными пунктами для ответа: их удобно проговаривать вслух и адаптировать под свои проекты.

Используйте материал как часть 2 серии: сначала проверьте фундаментальные темы, а затем тренируйтесь объяснять, как вы создаете, отлаживаете, измеряете и поддерживаете frontend-приложение. Для базы прочитайте Часть 1: основы HTML, CSS и JavaScript.

React и фреймворки (8 вопросов)

33. Что такое JSX и зачем мы используем его в React?

Ответ: JSX (JavaScript XML) - это расширение синтаксиса для JavaScript, которое выглядит похоже на HTML и используется для описания структуры пользовательского интерфейса в React.

Пример:

const element = <h1 className="title">Привет, {name}!</h1>;

// Компилируется в:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Привет, ',
  name,
  '!'
);

Преимущества:

• Более читаемый и интуитивно понятный, чем React.createElement()
• Выглядит как HTML, но с полной мощью JavaScript
• Поддерживает выражения внутри фигурных скобок {}
• Type-safe при использовании TypeScript
• Знакомый синтаксис для разработчиков

Ключевые отличия от HTML:

• Используйте className вместо class
• Используйте htmlFor вместо for
• Все атрибуты в camelCase (onClick, onChange)
• Необходимо закрывать все теги (включая <img />, <br />)

Редкость: Распространенный Сложность: Легкий

34. Объясните разницу между props и state в React

Ответ:

Props (Свойства):

• Данные, передаваемые ОТ родительского компонента К дочернему
• Read-only (неизменяемые с точки зрения дочернего компонента)
• Используются для конфигурации компонента
• Изменения происходят при повторной отрисовке родительского компонента

// Родительский компонент
function Parent() {
  return <Child name="Alice" age={25} />;
}

// Дочерний компонент
function Child({ name, age }) {
  return <p>{name} is {age} years old</p>;
  // Невозможно изменить name или age
}

State (Состояние):

• Данные, управляемые ВНУТРИ компонента
• Mutable (можно изменить с помощью функции-сеттера)
• Изменения вызывают повторные отрисовки
• Приватные для компонента

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Ключевое различие: Props передаются вниз (от родителя к ребенку), state является локальным для компонента.

Редкость: Распространенный Сложность: Легкий

35. Что такое хук useState и как вы его используете?

Ответ: useState - это хук React, который добавляет управление состоянием в функциональные компоненты.

Синтаксис:

const [stateVariable, setStateFunction] = useState(initialValue);

Примеры:

// Простой счетчик
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

// Объект состояния
function Form() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  );
}

// Ленивая инициализация (дорогостоящее вычисление)
const [data, setData] = useState(() => {
  return expensiveComputation();
});

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

• Обновления состояния вызывают повторные отрисовки
• Обновления состояния являются асинхронными
• Используйте функциональные обновления для состояния, основанного на предыдущем состоянии: setCount(prev => prev + 1)

Редкость: Распространенный Сложность: Легкий-Средний

36. Что делает хук useEffect? Объясните массив зависимостей.

Ответ: useEffect запускает побочные эффекты после рендеринга (получение данных, подписки, манипуляции с DOM).

Синтаксис:

useEffect(() => {
  // Код побочного эффекта здесь
  
  return () => {
    // Очистка (необязательно)
  };
}, [dependencies]);

Поведение массива зависимостей:

// 1. Нет массива зависимостей - запускается ПОСЛЕ КАЖДОГО рендеринга
useEffect(() => {
  console.log('Запускается каждый рендеринг');
});

// 2. Пустой массив [] - запускается ОДИН РАЗ при монтировании
useEffect(() => {
  console.log('Запускается только при монтировании');
  fetchData();
}, []);

// 3. С зависимостями - запускается при ИЗМЕНЕНИИ зависимостей
useEffect(() => {
  console.log('Запускается при изменении count');
  document.title = `Count: ${count}`;
}, [count]);

Типичные случаи использования:

// Получение данных
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// Обработчики событий (с очисткой)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

Редкость: Распространенный Сложность: Средний

37. Как отобразить список элементов в React? Зачем нам нужны ключи?

Ответ:

Отображение списков:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Почему ключи важны: Ключи помогают React идентифицировать, какие элементы были изменены, добавлены или удалены. Они обеспечивают эффективные обновления путем:

• Минимизации манипуляций с DOM
• Сохранения состояния компонента
• Поддержания правильной идентификации элемента
• Оптимизации алгоритма согласования

Руководства по ключам:

// ХОРОШО - Уникальные, стабильные идентификаторы
items.map(item => <Item key={item.id} {...item} />)

// ПЛОХО - Индекс массива (нестабилен при изменении списка)
items.map((item, index) => <Item key={index} {...item} />)

// ПЛОХО - Неуникальные ключи вызывают ошибки
items.map(item => <Item key={item.category} {...item} />)

Когда индекс приемлем: Статические списки, которые никогда не переупорядочиваются и не изменяются.

Редкость: Распространенный Сложность: Легкий-Средний

38. Что такое Virtual DOM и зачем React использует его?

Ответ: Virtual DOM - это легковесное JavaScript-представление фактического DOM, которое React поддерживает в памяти.

Как это работает:

1. Рендеринг: React создает дерево Virtual DOM при изменении состояния
2. Diff: React сравнивает новый Virtual DOM с предыдущей версией (согласование)
3. Обновление: React вычисляет минимальные необходимые изменения
4. Patch: React обновляет только измененные части реального DOM

Почему это выгодно:

• Производительность: Прямые манипуляции с DOM медленные; React объединяет и минимизирует обновления
• Эффективность: Обновляет только измененные элементы, а не все дерево
• Опыт разработчика: Пишите декларативный код, React обрабатывает эффективные обновления
• Абстракция: Один и тот же код может быть нацелен на разные платформы (React Native, VR)

Пример:

// Вы пишете:
<div>{count}</div>

// Когда count изменяется с 0 на 1:
// React обновляет только текстовый узел, а не весь div

Примечание: Современный React (архитектура Fiber) буквально не сравнивает два Virtual DOM, но использует аналогичную концепцию с узлами Fiber.

Редкость: Распространенный Сложность: Средний

39. Как обрабатывать формы в React?

Ответ:

Контролируемые компоненты (рекомендуется): Значения элементов формы контролируются состоянием React.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();  // Предотвратить перезагрузку страницы
    console.log('Отправлено:', formData);
    // API вызов здесь
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Неконтролируемые компоненты (менее распространены): Используйте refs для прямого доступа к значениям DOM.

function UncontrolledForm() {
  const emailRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  );
}

Лучшая практика: Используйте контролируемые компоненты в большинстве случаев.

Редкость: Распространенный Сложность: Средний

40. В чем разница между функциональными и классовыми компонентами?

Ответ:

Функциональные компоненты (современные, предпочтительные):

function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Побочные эффекты
  }, []);
  
  return <h1>Привет, {name}!</h1>;
}

Классовые компоненты (устаревшие):

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    // Побочные эффекты
  }
  
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Ключевые различия:

• Синтаксис: Функции vs классы
• Состояние: Хуки (useState) vs this.state
• Жизненный цикл: Хуки (useEffect) vs методы жизненного цикла
• Ключевое слово this: Не требуется в функциональных компонентах
• Boilerplate: Меньше кода в функциональных компонентах
• Производительность: Немного лучше с функциональными компонентами

Современный стандарт: Функциональные компоненты с Hooks теперь являются рекомендуемым подходом (начиная с React 16.8). Классовые компоненты по-прежнему работают, но считаются устаревшими.

Редкость: Распространенный Сложность: Легкий-Средний

Инструменты сборки и контроль версий (5 вопросов)

41. Что такое npm и для чего используется package.json?

Ответ: npm (Node Package Manager) - это менеджер пакетов по умолчанию для JavaScript, используемый для установки, управления и обмена пакетами кода.

package.json - это файл манифеста, который содержит:

• Метаданные: Имя проекта, версия, описание, автор
• Зависимости: Пакеты, необходимые для production (dependencies)
• DevDependencies: Пакеты, необходимые только для разработки (devDependencies)
• Скрипты: Команды для общих задач (start, build, test)

Пример package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Общие команды:

• npm install - Установить все зависимости
• npm install package-name - Установить конкретный пакет
• npm install --save-dev package-name - Установить как dev dependency
• npm run script-name - Запустить npm скрипт
• npm update - Обновить пакеты

Редкость: Распространенный Сложность: Легкий

42. Что такое Git и почему команды используют его?

Ответ: Git - это распределенная система контроля версий, которая отслеживает изменения в коде с течением времени.

Почему команды используют Git:

• Совместная работа: Несколько разработчиков работают над одной и той же кодовой базой без конфликтов
• История: Полная запись всех изменений (кто, что, когда, почему)
• Ветвление: Работайте над функциями независимо, не затрагивая основной код
• Резервное копирование: Код хранится в нескольких местах (локально + удаленно)
• Rollback: Легко вернуться к предыдущим рабочим версиям
• Code review: Просмотр изменений перед слиянием (pull requests)
• Эксперименты: Попробуйте новые идеи в ветвях без риска

Основные понятия:

• Репозиторий (repo): Папка проекта, отслеживаемая Git
• Commit: Снимок изменений с сообщением
• Branch: Независимая линия разработки
• Merge: Объединение изменений из разных ветвей
• Remote: Репозиторий, размещенный в Интернете (GitHub, GitLab)

Промышленный стандарт: 93%+ разработчиков используют Git во всем мире.

Редкость: Распространенный Сложность: Легкий

43. Объясните общие команды и рабочий процесс Git

Ответ:

Базовый рабочий процесс:

# Клонировать репозиторий
git clone https://github.com/user/repo.git

# Проверить статус
git status

# Создать новую ветвь
git checkout -b feature-name
# или современный синтаксис:
git switch -c feature-name

# Внести изменения, затем добавить в индекс
git add file.js
git add .  # Добавить в индекс все изменения

# Commit с сообщением
git commit -m "Add login feature"

# Отправить на удаленный репозиторий
git push origin feature-name

# Получить последние изменения
git pull origin main

# Слияние ветви
git checkout main
git merge feature-name

# Просмотреть историю
git log

Основные команды, которые должны знать юниоры:

• clone - Скопировать удаленный репозиторий
• add - Добавить изменения в индекс
• commit - Сохранить снимок с сообщением
• push - Загрузить на удаленный репозиторий
• pull - Скачать + слияние удаленных изменений
• branch - Список/создание ветвей
• checkout/switch - Переключение ветвей
• status - Посмотреть текущее состояние
• log - Просмотреть историю коммитов

Редкость: Распространенный Сложность: Легкий-Средний

44. Что такое конфликт слияния и как бы вы его разрешили?

Ответ: Конфликт слияния возникает, когда Git не может автоматически объединить изменения, поскольку конкурирующие изменения существуют в одних и тех же строках кода.

Общий сценарий:

# Разработчик A изменяет строку 5
# Разработчик B также изменяет строку 5
# При слиянии Git не знает, что сохранить

Маркеры конфликта:

<<<<<<< HEAD
const greeting = "Hello";
=======
const greeting = "Hi";
>>>>>>> feature-branch

Шаги разрешения:

1. Определите конфликты: Git помечает файлы с конфликтами
2. Откройте конфликтные файлы: Посмотрите на маркеры конфликта
3. Решите, что сохранить: Просмотрите оба изменения
4. Отредактируйте код: Удалите маркеры, сохраните желаемый код
5. Протестируйте: Убедитесь, что код работает правильно
6. Добавьте в индекс разрешенные файлы: git add file.js
7. Завершите слияние: git commit

Лучшие практики:

• Общайтесь с командой
• Часто выполняйте pull, чтобы минимизировать конфликты
• Сохраняйте небольшие и сфокусированные коммиты
• Тщательно протестируйте после разрешения

Редкость: Распространенный Сложность: Средний

45. Что делает Webpack? Что такое Vite?

Ответ:

Webpack: Сборщик модулей, который принимает JavaScript, CSS, изображения и другие ресурсы, обрабатывает их и объединяет в оптимизированные файлы для браузера.

Что он делает:

• Объединяет несколько файлов в меньшее количество файлов
• Преобразует код (Babel для JSX/ES6, Sass в CSS)
• Оптимизирует для production (минификация, tree shaking)
• Обрабатывает зависимости
• Code splitting для производительности

Основная концепция:

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (все скомбинировано и оптимизировано)

Vite: Современный инструмент сборки, который значительно быстрее, чем традиционные сборщики, такие как Webpack.

Почему Vite быстрее:

• Использует собственные ES-модули во время разработки (не требуется сборка)
• Hot Module Replacement (HMR) происходит мгновенно
• Собирает только для production
• Лучший опыт разработчика

Когда использовать:

• Vite: Новые проекты, современные фреймворки (React, Vue)
• Webpack: Существующие проекты, требуется сложная конфигурация

Редкость: Распространенный Сложность: Легкий-Средний

Web Performance & Optimization (3 вопроса)

46. Как бы вы оптимизировали производительность загрузки веб-сайта?

Ответ:

Оптимизация изображений:

• Сжимайте изображения (JPG для фотографий, PNG для графики, WebP для обоих)
• Используйте подходящие размеры (не загружайте изображение 4000px для отображения 300px)
• Ленивая загрузка изображений ниже сгиба
• Используйте srcset для адаптивных изображений

Оптимизация кода:

• Минифицируйте JavaScript, CSS, HTML (удалите пробелы, комментарии)
• Объединяйте и сжимайте файлы (gzip или Brotli)
• Удалите неиспользуемый CSS/JS (tree shaking)
• Code splitting (загружайте только необходимый код для каждой страницы)

Кэширование:

• Кэширование браузера с правильными заголовками кэша
• Используйте CDN для статических ресурсов
• Service workers для автономных возможностей

Стратегии загрузки:

• Critical CSS inline в <head>
• Отложите некритичный JavaScript
• Предварительная загрузка важных ресурсов
• Уменьшите количество HTTP-запросов

Метрики производительности:

• Измеряйте с помощью Lighthouse, PageSpeed Insights
• Цель: FCP < 1.8s, LCP < 2.5s, CLS < 0.1

Редкость: Распространенный Сложность: Средний

47. Какие инструменты вы бы использовали для измерения производительности веб-сайта?

Ответ:

Инструменты разработчика браузера:

• Вкладка Network в Chrome DevTools: Анализируйте время запроса, размеры файлов, порядок загрузки
• Вкладка Performance/Lighthouse: Создавайте отчеты о производительности с оценками
• Вкладка Coverage: Найдите неиспользуемый JavaScript/CSS
• Console: Измеряйте с помощью console.time() и Performance API

Онлайн инструменты:

• Google PageSpeed Insights: Получите оценки производительности и рекомендации
• WebPageTest: Подробные waterfall charts, несколько местоположений
• GTmetrix: Анализ производительности с оценками

Метрики для мониторинга:

• First Contentful Paint (FCP): Когда появляется первый контент
• Largest Contentful Paint (LCP): Когда загружается основной контент
• Time to Interactive (TTI): Когда страница становится интерактивной
• Cumulative Layout Shift (CLS): Визуальная стабильность
• Total Blocking Time (TBT): Время блокировки основного потока

Для юниоров: Достаточно базового знакомства с Chrome DevTools и Lighthouse. Глубокие навыки профилирования не ожидаются.

Редкость: Распространенный Сложность: Легкий-Средний

48. Что такое lazy loading и когда вы бы его использовали?

Ответ: Lazy loading откладывает загрузку некритичных ресурсов до тех пор, пока они не понадобятся, обычно когда они собираются войти в область просмотра.

Типичные случаи использования:

Изображения:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Description">

Native lazy loading (современные браузеры):

<img src="image.jpg" loading="lazy" alt="Description">

JavaScript/React:

// Component lazy loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Преимущества:

• Более быстрая начальная загрузка страницы
• Снижение использования полосы пропускания
• Лучшая производительность при медленном соединении
• Улучшенный пользовательский опыт (контент появляется быстрее)

Когда использовать:

• Изображения ниже сгиба
• Тяжелые компоненты, не сразу видимые
• Контент во вкладках/аккордеонах
• Реализации бесконечной прокрутки

Редкость: Необычный Сложность: Средний

Отладка и инструменты разработчика (2 вопроса)

49. Как отладить ошибку JavaScript в браузере?

Ответ:

Пошаговый процесс отладки:

1. Проверьте консоль:

console.log(variable);      // Проверьте значения
console.error('Error:', error);  // Зарегистрируйте ошибки
console.table(arrayOfObjects);   // Просмотр данных в таблице
console.warn('Warning');    // Выделите предупреждения

2. Используйте точки останова:

• Откройте панель DevTools Sources/Debugger
• Щелкните номер строки, чтобы установить точку останова
• Выполнение кода приостанавливается в точке останова
• Проверьте переменные на панели Scope
• Шаг за шагом по коду (Step Over, Step Into, Step Out)

3. Изучите Stack Trace:

• Сообщения об ошибках показывают имена файлов и номера строк
• Следуйте по стеку вызовов, чтобы найти источник ошибки
• Проверьте ошибки сети на вкладке Network

4. Отлаживайте проблемы DOM:

• Проверьте элементы на панели Elements
• Проверьте вычисленные стили
• Используйте принудительное состояние :hover
• Убедитесь, что прослушиватели событий прикреплены

5. Проверьте сетевые запросы:

• Вкладка Network показывает неудачные вызовы API
• Изучите заголовки запроса/ответа
• Проверьте коды состояния (404, 500 и т. д.)

Общие методы отладки:

• Добавьте оператор debugger;, чтобы приостановить выполнение
• Используйте условные точки останова
• Смотрите выражения
• Black box сторонний код

Редкость: Распространенный Сложность: Легкий-Средний

50. Каковы основные панели в Chrome DevTools и для чего вы их используете?

Ответ:

Основные панели:

1. Console:

• Просмотр ошибок и журналов JavaScript
• Выполнение команд JavaScript
• Интерактивное тестирование выражений
• Тестирование API

2. Elements (Inspector):

• Проверка и изменение структуры HTML
• Редактирование CSS в режиме реального времени
• Отладка проблем с макетом
• Просмотр вычисленных стилей, box model
• Тестирование адаптивного дизайна

3. Sources (Debugger):

• Просмотр исходных файлов
• Установка точек останова
• Пошаговое выполнение кода
• Редактирование и сохранение изменений (рабочие пространства)
• Просмотр стека вызовов

4. Network:

• Мониторинг HTTP-запросов/ответов
• Проверка времени загрузки и размеров файлов
• Отладка вызовов API
• Фильтрация по типу (JS, CSS, XHR, изображения)
• Регулировка скорости сети

5. Performance/Lighthouse:

• Анализ производительности во время выполнения
• Создание аудитов производительности
• Определение узких мест
• Проверка Core Web Vitals

6. Application:

• Проверка local storage, session storage
• Просмотр и очистка cookies
• Проверка service workers
• Управление кэшем

Для юниоров: Ожидается хорошее знакомство с Console, Elements, Sources и Network. Профилирование производительности является плюсом.

Редкость: Распространенный Сложность: Легкий

Доступность и лучшие практики (2 вопроса)

51. Что такое веб-доступность и почему это важно?

Ответ: Веб-доступность означает проектирование и разработку веб-сайтов, которые могут использоваться всеми, включая людей с ограниченными возможностями (зрительными, слуховыми, двигательными, когнитивными).

Почему это важно:

1. Инклюзивный дизайн: 15% населения мира имеет ту или иную форму инвалидности 2. Юридические требования: ADA (Americans with Disabilities Act), Section 508, соответствие WCAG 3. Лучший UX для всех: Субтитры помогают в шумной обстановке, навигация с помощью клавиатуры помогает опытным пользователям 4. Преимущества SEO: Семантический HTML и правильная структура улучшают рейтинг в поиске 5. Более широкая аудитория: Не исключайте потенциальных пользователей/клиентов 6. Этическая ответственность: Равный доступ - это право человека

Общие недостатки, которые следует учитывать:

• Визуальные: Слепота, слабое зрение, дальтонизм
• Слуховые: Глухота, потеря слуха
• Двигательные: Ограниченная подвижность, тремор, паралич
• Когнитивные: Нарушения обучаемости, проблемы с памятью

Бизнес-кейс: Доступные веб-сайты охватывают больше пользователей, лучше ранжируются в поиске, избегают судебных исков, демонстрируют корпоративную ответственность.

Редкость: Распространенный Сложность: Легкий-Средний

52. Каковы основные способы сделать веб-сайт более доступным?

Ответ:

Структура HTML:

• Используйте семантические элементы (<header>, <nav>, <main>, <article>, <footer>)
• Правильная иерархия заголовков (H1 → H2 → H3, без пропусков)
• Правильно подписывайте поля формы

<label for="email">Email:</label>
<input id="email" type="email" name="email" />

Изображения:

• Всегда включайте описательный текст alt
• Используйте пустой alt для декоративных изображений: alt=""

Навигация с клавиатуры:

• Все интерактивные элементы должны быть доступны с клавиатуры
• Логический порядок табуляции
• Видимые индикаторы фокуса
• Не удаляйте контур :focus

Цвет и контраст:

• Достаточный цветовой контраст (4.5:1 для обычного текста, 3:1 для крупного текста)
• Не полагайтесь исключительно на цвет для передачи информации
• Протестируйте с помощью симуляторов дальтонизма

Атрибуты ARIA (при необходимости):

<button aria-label="Close dialog">×</button>
<div role="alert" aria-live="polite">Changes saved</div>
<nav aria-label="Main navigation">...</nav>

Тестирование:

• Используйте программы чтения с экрана (VoiceOver, NVDA, JAWS)
• Навигация только с помощью клавиатуры
• Инструменты доступности браузера (Lighthouse, axe)

Редкость: Распространенный Сложность: Средний

Тестирование (1 вопрос)

53. Что такое модульное тестирование и почему это важно?

Ответ: Модульное тестирование включает в себя тестирование отдельных функций или компонентов изолированно, чтобы убедиться, что они работают правильно.

Что он тестирует:

• Возвращает ли функция ожидаемый вывод для заданного ввода?
• Правильно ли отображается компонент с заданными props?
• Правильно ли работают крайние случаи?

Пример (Jest):

// Функция для тестирования
function add(a, b) {
  return a + b;
}

// Модульный тест
test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('handles negative numbers', () => {
  expect(add(-1, -2)).toBe(-3);
});

Почему это важно:

• Ловит ошибки на ранней стадии: Находите проблемы до production
• Уверенность в изменениях: Рефакторинг без страха
• Документация: Тесты показывают, как следует использовать код
• Более быстрая отладка: Точно определите местоположение отказа
• Лучший дизайн: Тестируемый код обычно чище

Пирамида тестирования:

• Много модульных тестов (быстрые, дешевые)
• Меньше интеграционных тестов (тестирование компонентов вместе)
• Несколько сквозных тестов (полные пользовательские потоки, медленные)

Для юниоров: Достаточно понимания того, почему тестирование важно, и основных концепций. Написание полных наборов тестов обычно не ожидается для должностей начального уровня, но готовность к изучению тестирования важна.

Общие фреймворки: Jest, React Testing Library, Mocha, Jasmine

Редкость: Распространенный Сложность: Легкий-Средний

Всего: 21 вопрос

Эти вопросы охватывают практические темы React и инструментов, которые часто обсуждают после фундаментальных знаний на junior frontend собеседовании. Используйте их вместе с Частью 1: основы HTML, CSS и JavaScript, а затем тренируйтесь объяснять ответы на примерах из своих проектов.