Question 1

Quelle est la différence principale entre getBy, queryBy et findBy dans React Testing Library ?

Accepted Answer

getBy lance une erreur si l'élément n'existe pas (assertions synchrones), queryBy retourne null si l'élément n'existe pas (vérifier l'absence), et findBy retourne une Promise pour les éléments asynchrones. Utiliser getBy par défaut pour les éléments qui doivent exister, queryBy pour vérifier qu'un élément n'est pas présent, et findBy pour attendre l'apparition d'un élément après un délai.

Question 2

Quel est l'avantage principal de getByRole par rapport à getByTestId ?

Accepted Answer

getByRole encourage les bonnes pratiques d'accessibilité en ciblant les éléments par leur rôle ARIA sémantique (button, textbox, heading), ce qui améliore l'accessibilité du composant pour les lecteurs d'écran. getByTestId nécessite d'ajouter des attributs data-testid artificiels qui n'apportent aucune valeur pour l'utilisateur final. React Testing Library recommande de privilégier getByRole, getByLabelText et getByText avant getByTestId.

Question 3

Comment tester l'affichage conditionnel d'un élément qui n'est PAS présent dans le DOM ?

Accepted Answer

Utiliser queryBy pour vérifier l'absence d'un élément, car il retourne null au lieu de lancer une erreur. Exemple : expect(screen.queryByText('Error')).toBeNull() ou expect(screen.queryByText('Error')).not.toBeInTheDocument(). getBy lancerait une erreur et ferait échouer le test, tandis que findBy attend l'apparition de l'élément (timeout si absent).

Testing React

Quelle est la différence principale entre getBy, queryBy et findBy dans React Testing Library ?

Réponse

Quel est l'avantage principal de getByRole par rapport à getByTestId ?

Réponse

Comment tester l'affichage conditionnel d'un élément qui n'est PAS présent dans le DOM ?

Réponse

Pourquoi React Testing Library recommande-t-il de NE PAS tester les détails d'implémentation ?

Quelle est la différence entre render et screen dans React Testing Library ?

Autres sujets d'entretien React / Next.js

Les bases de JavaScript

Fondamentaux React

React Hooks

Cycle de vie des composants

React Router

Gestion d'état avec Context

Formulaires & Composants contrôlés

Fetching de données & API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentaux Next.js

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation Next.js

API Routes Next.js

Metadata & SEO Next.js

Middleware & Auth Next.js

Zustand State Management

Optimisation Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Fonctionnalités avancées Next.js

Déploiement & Production Next.js

Architecture & Design Patterns

React Server Components

Internationalisation Next.js

Sécurité & Best Practices React

Maîtrise React / Next.js pour ton prochain entretien