Progression
0 %
0/32 étapes terminées
Avancé · 12 min de lecture
Tests et qualité
Livrer souvent sans casser
1Définition
La stratégie de qualité d'une app React Native combine le typage (TypeScript), les tests unitaires et de composants (Jest et React Native Testing Library), des tests de bout en bout sur appareil (Maestro ou Detox) et une intégration continue qui exécute tout cela à chaque modification.
2Principes fondamentaux
01
Tester comme l'utilisateur
React Native Testing Library interroge l'écran par texte, rôle ou libellé d'accessibilité, et simule les interactions, plutôt que d'inspecter l'implémentation.
02
La pyramide
Beaucoup de tests rapides sur la logique et les composants, quelques tests de bout en bout sur les parcours critiques (inscription, paiement).
03
Des parcours de bout en bout lisibles
Maestro décrit un parcours en YAML : lancer l'app, toucher un texte, saisir, vérifier qu'un élément est visible.
3Exemples pratiques
Un test de composant
1import { render, screen, userEvent } from '@testing-library/react-native';2import { Compteur } from './Compteur';3 4test('augmente le score à chaque appui', async () => {5 const user = userEvent.setup();6 render(<Compteur />);7 8 await user.press(screen.getByRole('button', { name: '+1' }));9 await user.press(screen.getByRole('button', { name: '+1' }));10 11 expect(screen.getByText('2 points')).toBeOnTheScreen();12});Le test ne connaît ni useState ni la structure interne : il ne cassera pas si tu refactorises proprement.
Un parcours Maestro
1appId: app.syscode2---3- launchApp4- tapOn: "Commencer React Native"5- tapOn: "Ton premier écran"6- assertVisible: "Un composant est une fonction"Le même fichier s'exécute sur iOS et Android, en local ou en intégration continue.
4Erreurs courantes
Tester l'implémentation
À éviter
expect(composant.state.count).toBe(2);À faire
expect(screen.getByText('2 points')).toBeOnTheScreen();Pourquoi : Un test lié aux détails internes casse au moindre refactoring, même si l'app fonctionne.
Des tests qui attendent au hasard
À éviter
await new Promise((r) => setTimeout(r, 2000));expect(screen.getByText('Chargé')).toBeTruthy();À faire
expect(await screen.findByText('Chargé')).toBeOnTheScreen();Pourquoi : findBy… attend l'apparition de l'élément : le test est rapide quand tout va bien et fiable quand c'est lent.
5Subtilités à connaître
- ◆Les modules natifs doivent être simulés (mocks) dans Jest ; beaucoup de bibliothèques fournissent leur propre mock.
- ◆
jest-expoconfigure Jest pour les projets Expo. - ◆Donner des
accessibilityLabelutiles améliore à la fois l'accessibilité et la testabilité.
6Techniques d'expert
Tester les requêtes avec MSW
Mock Service Worker intercepte les appels réseau dans les tests : tu testes les vrais écrans avec des réponses d'API contrôlées.
Des captures de régression visuelle
Capturer des écrans clés sur appareil en intégration continue détecte les régressions de mise en page que les tests fonctionnels ratent.
Bloquer la fusion
Types, lint, tests unitaires et parcours critiques obligatoires avant de fusionner : la branche principale reste toujours publiable.
7Sur le terrain
- Les équipes exécutent les parcours Maestro critiques sur chaque pull request et la suite complète chaque nuit.
- Les tests de composants documentent le comportement attendu pour les nouveaux arrivants.
- Les builds de prévisualisation (development builds) sont partagés aux testeurs à chaque fusion.
8Vérifie ta compréhension
Question 1/3
Score 0
Comment React Native Testing Library trouve-t-il les éléments de préférence ?
Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.