Question 1

Jaka jest główna różnica między getBy, queryBy i findBy w React Testing Library?

Accepted Answer

getBy rzuca błąd, jeśli element nie istnieje (synchroniczne assertions), queryBy zwraca null, jeśli element nie istnieje (sprawdzanie nieobecności), a findBy zwraca Promise dla elementów asynchronicznych. Używaj getBy domyślnie dla elementów, które muszą istnieć, queryBy, aby zweryfikować, że element nie jest obecny, i findBy, aby czekać na pojawienie się elementu po opóźnieniu.

Question 2

Jaka jest główna zaleta getByRole w porównaniu z getByTestId?

Accepted Answer

getByRole promuje dobre praktyki dostępności, celując w elementy według ich semantycznej roli ARIA (button, textbox, heading), co poprawia dostępność komponentu dla czytników ekranu. getByTestId wymaga dodawania sztucznych atrybutów data-testid, które nie dają żadnej wartości użytkownikowi końcowemu. React Testing Library zaleca priorytetowe używanie getByRole, getByLabelText i getByText przed getByTestId.

Question 3

Jak przetestować warunkowe renderowanie elementu, który NIE jest obecny w DOM?

Accepted Answer

Użyj queryBy, aby zweryfikować brak elementu, ponieważ zwraca null zamiast rzucać błąd. Przykład: expect(screen.queryByText('Error')).toBeNull() lub expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy rzuciłby błąd i spowodował niepowodzenie testu, podczas gdy findBy czeka na pojawienie się elementu (timeout przy braku).

Testowanie React

Jaka jest główna różnica między getBy, queryBy i findBy w React Testing Library?

Odpowiedź

Jaka jest główna zaleta getByRole w porównaniu z getByTestId?

Odpowiedź

Jak przetestować warunkowe renderowanie elementu, który NIE jest obecny w DOM?

Odpowiedź

Dlaczego React Testing Library zaleca, aby NIE testować szczegółów implementacji?

Jaka jest różnica między render a screen w React Testing Library?

Inne tematy rekrutacyjne React / Next.js

Podstawy JavaScript

Podstawy React

React Hooks

Cykl życia komponentu

React Router

Zarządzanie stanem z Context

Formularze i Controlled Components

Pobieranie danych i API

React Query (TanStack Query)

Styling & CSS-in-JS

Podstawy Next.js

TypeScript z React

Pobieranie danych w Next.js

Server Actions w Next.js

Routing i Nawigacja w Next.js

API Routes w Next.js

Metadata & SEO w Next.js

Middleware i Auth w Next.js

Zustand State Management

Optymalizacja wydajności React

Error Boundaries & Error Handling

Advanced React Patterns

Zaawansowane funkcje Next.js

Wdrożenie i Produkcja Next.js

Architecture & Design Patterns

React Server Components

Internacjonalizacja Next.js

React Bezpieczeństwo & Najlepsze Praktyki

Opanuj React / Next.js na następną rozmowę