Tests par instantané HTML
Détectez les modifications HTML involontaires avec des tests par instantané.
Tests par instantané HTML est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. 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 HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu’est-ce que les tests par instantané
Les tests par instantané enregistrent la sortie rendue d’un composant ou d’une page lors de la première exécution, puis comparent la nouvelle sortie à l’instantané enregistré lors des exécutions suivantes. Toute modification de la sortie HTML fait échouer le test jusqu’à la mise à jour volontaire de l’instantané.
Tests par instantané avec Jest
Le comparateur toMatchSnapshot() de Jest sérialise une valeur (y compris du JSX rendu en HTML) et la compare à un fichier enregistré. npx jest -u met à jour les instantanés lorsque des modifications intentionnelles ont lieu. Les tests servent de filet de sécurité contre les modifications accidentelles du rendu.
import { render } from "@testing-library/react";
import Button from "./Button";
test("Button renders consistently", () => {
const { container } = render(<Button>Save</Button>);
expect(container.innerHTML).toMatchSnapshot();
});Exécuteur de tests Storybook
Storybook Test Runner exécute chaque scénario et crée un instantané de sa sortie via axe (accessibilité) et la sérialisation du DOM. Associé à Chromatic, il ajoute une détection des régressions visuelles : des différences au niveau des pixels en plus des différences du DOM.
Régression visuelle avec Percy ou Chromatic
Percy et Chromatic capturent des instantanés des pages rendues sous forme d’images et font apparaître les différences visuelles. Ils détectent les régressions CSS que les instantanés du DOM ne voient pas (remplacement de police, modification de marge, changement de couleur). Associez les instantanés du DOM (peu coûteux et rapides) aux instantanés visuels (coûteux et complets).
Maintenance des instantanés
Les instantanés qui changent « trop facilement » deviennent du bruit. Évitez de créer des instantanés contenant des valeurs instables (dates, identifiants, clés aléatoires). Utilisez les comparateurs de propriétés de Jest (expect.any(String)) pour les champs qui varient légitimement entre les exécutions. Gardez des instantanés courts et ciblés.
Revue de code des instantanés
Les différences des fichiers d’instantanés dans les PR sont des éléments de premier ordre à examiner. Les personnes chargées de la revue vérifient que les modifications du DOM sont intentionnelles et bienvenues, ce qui permet de détecter les effets en cascade accidentels d’une modification CSS « simple ». Considérez les différences d’instantanés comme toute autre différence.
Ne créez pas d’instantané pour tout
Les instantanés de rendus de pages volumineux au niveau supérieur sont fragiles : chaque modification mineure se répercute dans une différence gigantesque. Créez des instantanés au niveau des composants : chaque bouton, chaque carte, chaque FormField. Le rendu au niveau de la page mérite plutôt des tests de régression visuelle.
Sérialisation des instantanés
Choisissez le mode de sérialisation : HTML complet, DOM simplifié, propriétés uniquement ou arbre d’accessibilité. Chaque format détecte des régressions différentes. Pour les composants d’interface utilisateur, le HTML complet est le plus exhaustif ; pour la logique pilotée par les propriétés, le format limité aux propriétés est plus économique et produit rarement de faux positifs.
Quand les instantanés ne correspondent plus
La cause la plus courante est une refactorisation qui produit un HTML équivalent, mais structuré différemment. Inspectez la différence : si la modification est intentionnelle et bénéfique, mettez à jour l’instantané. Si elle est inattendue, corrigez le code sous-jacent. N’exécutez jamais aveuglément jest -u sans inspection.
Instantanés multi-navigateurs
Les outils de régression visuelle effectuent le rendu dans plusieurs navigateurs et signalent les différences propres à chacun. Utilisez-les pour détecter un CSS rendu différemment dans Safari et Chrome, ce qui est fréquent pour les nouvelles fonctionnalités de mise en page durant leur phase d’adoption précoce. Sans instantanés multi-navigateurs, ces régressions ne sont détectées que par une QA manuelle.
Combiner avec d’autres tests
Les tests par instantané sont nécessaires, mais pas suffisants. Ils détectent les modifications de rendu involontaires, mais pas les erreurs de logique, par exemple lorsqu’un clic sur le bouton n’effectue pas la bonne action. Associez-les à des tests unitaires pour le comportement et à des tests de bout en bout pour les parcours utilisateur : chaque couche détecte des défaillances différentes.
Performances
Les tests par instantané sont rapides : ils comparent des chaînes ou des fichiers. Les tests de régression visuelle sont plus lents, car ils effectuent le rendu des pixels et comparent des images, souvent dans plusieurs navigateurs. Exécutez les instantanés à chaque compilation CI ; exécutez la régression visuelle pour chaque PR, mais éventuellement pas pour chaque validation, selon le budget CI.
Vérification des connaissances
Pourquoi les tests d’instantané du DOM sont-ils généralement complétés par des tests de régression visuelle comme Percy ou Chromatic ?
Résumé
Les tests par instantané capturent le HTML rendu lors de la première exécution et signalent toute modification lors des exécutions suivantes. Utilisez Jest toMatchSnapshot pour le DOM des composants, Storybook Test Runner pour les scénarios et Percy/Chromatic pour la régression visuelle au niveau des pixels. Créez des instantanés au niveau des composants, et non des pages, excluez les valeurs instables et examinez attentivement les différences dans les PR. Combinez-les avec des tests unitaires et des tests de bout en bout pour une couverture complète.
Questions Fréquemment Posées
La leçon « Tests par instantané HTML » est-elle gratuite ?
Oui — le texte complet de « Tests par instantané HTML » 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 HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Tests par instantané HTML » ?
Détectez les modifications HTML involontaires avec des tests par instantané. Tu pratiques HTML 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 HTML Academy ?
Aucune expérience préalable n'est requise. HTML 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 4 sur 4.
Combien de temps prend la leçon « Tests par instantané HTML » ?
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 HTML Academy ?
Oui. Chaque leçon HTML 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
- Le validateur de balisage du W3C
- Audit HTML avec Lighthouse
- Pa11y et axe pour les tests d’accessibilité
- Tests par instantané HTML