Testing React
React Testing Library, Jest, Vitest, testing dei componenti, mocking, interazioni utente, coverage
1Qual è la differenza principale tra getBy, queryBy e findBy in React Testing Library?
Qual è la differenza principale tra getBy, queryBy e findBy in React Testing Library?
Risposta
getBy lancia un errore se l'elemento non esiste (assertions sincrone), queryBy restituisce null se l'elemento non esiste (verificare l'assenza), e findBy restituisce una Promise per gli elementi asincroni. Usa getBy di default per gli elementi che devono esistere, queryBy per verificare che un elemento non sia presente e findBy per attendere che un elemento appaia dopo un ritardo.
2Qual è il vantaggio principale di getByRole rispetto a getByTestId?
Qual è il vantaggio principale di getByRole rispetto a getByTestId?
Risposta
getByRole incoraggia le buone pratiche di accessibilità puntando agli elementi tramite il loro ruolo ARIA semantico (button, textbox, heading), migliorando l'accessibilità del componente per gli screen reader. getByTestId richiede l'aggiunta di attributi data-testid artificiali che non apportano alcun valore all'utente finale. React Testing Library raccomanda di privilegiare getByRole, getByLabelText e getByText prima di getByTestId.
3Come testare il rendering condizionale di un elemento che NON è presente nel DOM?
Come testare il rendering condizionale di un elemento che NON è presente nel DOM?
Risposta
Usa queryBy per verificare l'assenza di un elemento, poiché restituisce null invece di lanciare un errore. Esempio: expect(screen.queryByText('Error')).toBeNull() oppure expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy lancerebbe un errore e farebbe fallire il test, mentre findBy attende che l'elemento appaia (timeout se assente).
Perché React Testing Library raccomanda di NON testare i dettagli di implementazione?
Qual è la differenza tra render e screen in React Testing Library?
+17 domande da colloquio
Altri argomenti di colloquio React / Next.js
Fondamenti di JavaScript
Fondamenti di React
React Hooks
Ciclo di vita dei componenti
React Router
Gestione dello state con Context
Form e Controlled Components
Recupero dati e API
React Query (TanStack Query)
Styling & CSS-in-JS
Fondamentali di Next.js
TypeScript con React
Data Fetching in Next.js
Server Actions di Next.js
Routing e Navigazione in Next.js
API Routes di Next.js
Metadata & SEO in Next.js
Middleware e Auth in Next.js
Zustand State Management
Ottimizzazione delle Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Funzionalità avanzate di Next.js
Deploy e Produzione con Next.js
Architecture & Design Patterns
React Server Components
Internazionalizzazione di Next.js
React Sicurezza & Best Practices
Padroneggia React / Next.js per il tuo prossimo colloquio
Accedi a tutte le domande, flashcards, test tecnici, esercizi di code review e simulatori di colloquio.
Inizia gratis