Configuration de React Testing Library et de Vitest/Jest
Installez et configurez Vitest/Jest avec React Testing Library ; utilisez jsdom, rendez les composants et interrogez le DOM comme le ferait un utilisateur.
Configuration de React Testing Library et de Vitest/Jest est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Pourquoi cette pile
Objectif : Testez les composants comme un utilisateur les manipule.
- Exécuteur Vitest/Jest
- Environnement jsdom
- React Testing Library (RTL)
Installation et environnement
Installation :
- npm i -D vitest @testing-library/react @testing-library/user-event jsdom
- Définissez l’environnement de test sur jsdom
- Ajoutez les scripts : test, test:watch
Composant de démonstration à tester
Ce petit composant expose un rôle, un nom et un état clairs afin que les tests puissent l’interroger.
<div id="root"></div>
Aperçu : contenu d’un fichier de test
Aperçu d’un test utilisant RTL + Vitest. Nous affichons le contenu du fichier à titre de référence.
<div id="root"></div>
Éléments essentiels de la configuration
- Environnement : jsdom
- Configuration : ajoutez @testing-library/jest-dom si vous le souhaitez
- Scripts : "test", "test:watch"
Interroger comme un utilisateur
Requêtes à privilégier :
- getByRole / findByRole
- getByLabelText
- getByText
Utilisez les identifiants de test uniquement lorsqu’aucune requête accessible ne convient.
Vérification des recommandations d’interrogation de RTL
Récapitulatif
Récapitulatif : Installez Vitest/Jest et RTL, définissez jsdom, affichez les composants et privilégiez les requêtes par rôle ou par étiquette. Ajoutez user-event pour des interactions réalistes.
Questions Fréquemment Posées
La leçon « Configuration de React Testing Library et de Vitest/Jest » est-elle gratuite ?
Oui — le texte complet de « Configuration de React Testing Library et de Vitest/Jest » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Configuration de React Testing Library et de Vitest/Jest » ?
Installez et configurez Vitest/Jest avec React Testing Library ; utilisez jsdom, rendez les composants et interrogez le DOM comme le ferait un utilisateur. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.
Combien de temps prend la leçon « Configuration de React Testing Library et de Vitest/Jest » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configuration de React Testing Library et de Vitest/Jest
- Requêtes, événements, assertions — formulaires et interface asynchrone
- Simuler la récupération et les minuteurs