Question 1

Яка основна різниця між getBy, queryBy та findBy у React Testing Library?

Accepted Answer

getBy кидає помилку, якщо елемент не існує (синхронні assertions), queryBy повертає null, якщо елемент не існує (перевірка відсутності), а findBy повертає Promise для асинхронних елементів. Використовуйте getBy за замовчуванням для елементів, які повинні існувати, queryBy для перевірки відсутності елемента, і findBy для очікування появи елемента після затримки.

Question 2

Яка основна перевага getByRole порівняно з getByTestId?

Accepted Answer

getByRole заохочує найкращі практики доступності, націлюючись на елементи за їхньою семантичною роллю ARIA (button, textbox, heading), що покращує доступність компонента для зчитувачів екрана. getByTestId вимагає додавання штучних атрибутів data-testid, які не надають жодної цінності кінцевим користувачам. React Testing Library рекомендує надавати пріоритет getByRole, getByLabelText та getByText перед getByTestId.

Question 3

Як протестувати умовний рендеринг елемента, який НЕ присутній у DOM?

Accepted Answer

Використовуйте queryBy для перевірки відсутності елемента, оскільки він повертає null замість того, щоб кидати помилку. Приклад: expect(screen.queryByText('Error')).toBeNull() або expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy кинув би помилку і провалив тест, тоді як findBy чекає появи елемента (timeout при відсутності).

Тестування React

Яка основна різниця між getBy, queryBy та findBy у React Testing Library?

Відповідь

Яка основна перевага getByRole порівняно з getByTestId?

Відповідь

Як протестувати умовний рендеринг елемента, який НЕ присутній у DOM?

Відповідь

Чому React Testing Library рекомендує НЕ тестувати деталі реалізації?

Яка різниця між render та screen у React Testing Library?

Інші теми співбесід React / Next.js

Основи JavaScript

Основи React

React Hooks

Життєвий цикл компонента

React Router

Управління станом з Context

Форми та Controlled Components

Отримання даних та API

React Query (TanStack Query)

Styling & CSS-in-JS

Основи Next.js

TypeScript з React

Data Fetching у Next.js

Server Actions у Next.js

Маршрутизація та Навігація в Next.js

API Routes у Next.js

Metadata & SEO у Next.js

Middleware та Auth у Next.js

Zustand State Management

Оптимізація продуктивності React

Error Boundaries & обробка помилок

Advanced React Patterns

Розширені можливості Next.js

Розгортання та Продакшн Next.js

Architecture & Design Patterns

React Server Components

Інтернаціоналізація Next.js

React Безпека & Найкращі Практики

Опануй React / Next.js для наступної співбесіди