🃏 Jest 19 : Mode Watch Immersive et Améliorations de la Plateforme de Test

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Nous sommes ravis de livrer aujourd'hui la version 19 de la plateforme de test Jest. Il s'agit de la plus importante version de Jest que nous ayons publiée à ce jour, et nous sommes très enthousiastes de vous montrer ce que nous avons construit ces deux derniers mois :

Mode Watch Immersif

Nous avons entièrement réécrit le mode watch pour le rendre instantané et plus extensible. Le résultat offre une expérience véritablement immersive : les tests se relancent instantanément après une modification de fichier et nous avons simplifié la sélection des tests pertinents.

Mises à jour des Snapshots

Nous avons apporté quelques modifications au format des snapshots. Nous n'effectuons ce type de changements que rarement et uniquement s'ils améliorent réellement le fonctionnement des snapshots. En plus d'introduire un numéro de version pour les snapshots, nous avons intégré plusieurs améliorations que nous souhaitions apporter au format depuis un certain temps :

• Suppression du préfixe "test" dans les noms de snapshots provenant des appels test ou it de haut niveau.

• Amélioration de l'affichage des éléments React pour réduire les changements lorsque la dernière prop d'un élément est modifiée.

• Renforcement du mécanisme d'échappement des caractères pour le rendre plus robuste.

Avant :

exports[`test snap 1`] = `
<header>
  <h1>
    Jest \"19\"
  </h1>
  <Subtitle
    name="Painless JavaScript Testing" />
</header>
`;

Après (pas de préfixe "test", meilleur rendu JSX, en-tête de version) :

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`snap 1`] = `
<header>
  <h1>
    Jest "19"
  </h1>
  <Subtitle
    name="Painless JavaScript Testing"
  />
</header>
`;

Nous avons jugé opportun d'introduire des snapshots versionnés pour garantir que tous les développeurs utilisent une version compatible de Jest. Voici comment nous vous alertons de la nécessité de mettre à jour votre snapshot :

Veuillez vous assurer de réinitialiser toutes les modifications locales avant la mise à jour pour une transition fluide et éviter d'inclure des changements indésirables provenant de tests en échec dans vos nouveaux snapshots.

Amélioration de l'affichage des tests ignorés

Les tests ignorés sont désormais affichés sur une seule ligne au lieu de les lister individuellement en mode verbeux ou dans une suite unique. Cela vous permettra de vous concentrer sur les tests actuellement pertinents. Cela occupe également beaucoup moins d'espace !

Nouveaux arguments CLI

Jest 19 inclut deux nouveaux arguments liés à la couverture de code, utilisables en ligne de commande :

• --collectCoverageFrom

• --coverageDirectory

Nous générons désormais une erreur pour les arguments CLI invalides au lieu de les ignorer. Mais nous vous accompagnons avec des messages d'erreur utiles comme celui-ci, par exemple lorsque vous tentez d'exécuter jest --watc :

Améliorations d'expect

• expect.addSnapshotSerializer

• expect.stringContaining

• jest.spyOn

Nous approchons d'une quasi-parité fonctionnelle avec le package npm expect. Michael Jackson, l'auteur du package, a accepté de le céder au projet Jest, ce qui signifie que jest-matchers sera renommé en expect. Comme notre version d'expect n'est pas destinée à être entièrement compatible, Christopher Chedeau travaille sur un codemod pour faciliter la transition. Christopher a également contribué à plusieurs améliorations de jest-matchers permettant son utilisation hors de Jest, y compris dans les navigateurs.

eslint-plugin-jest – notre propre plugin ESLint

Grâce à Jonathan Kim, Jest dispose enfin de son propre plugin ESLint officiel. Il expose trois règles :

• no-disabled-tests - cette règle empêche de commettre accidentellement des tests désactivés.

• no-focused-tests - cette règle évite de commettre des tests focalisés qui désactiveraient tous les autres tests de la même suite.

• no-identical-title - interdit les titres identiques dans les noms de tests.

Vous pouvez l'installer via npm install --save-dev eslint-plugin-jest ou yarn add --dev eslint eslint-plugin-jest, et l'activer en ajoutant {"plugins": ["jest"]} à votre configuration ESLint.

Nouveau package public : jest-validate

Lors du refactoring du code de validation et de normalisation de la configuration de Jest, nous avons été si satisfaits des nouveaux messages d'erreur que nous l'avons extrait dans son propre module pour le partager avec tous. Avec Jest 19, nous accueillons jest-validate dans notre famille de packages autonomes.

jest-validate est un outil générique de validation de configuration qui vous assiste avec des avertissements, erreurs et messages de dépréciation dans vos outils JavaScript. Il peut aussi montrer aux utilisateurs des exemples conviviaux de configuration correcte et propose une API simple mais puissante. Nous espérons qu'il sera un excellent ajout à vos projets !

Nous sommes heureux d'annoncer que jest-validate valide les options de configuration de prettier depuis la v0.12. N'hésitez pas à l'ajouter à votre projet, l'essayer, nous faire des retours et l'améliorer via des pull requests sur GitHub.

Amélioration des matchers asymétriques

Nous avons déplacé l'implémentation des matchers asymétriques de Jasmine vers Jest, ce qui nous a permis d'améliorer encore l'expérience utilisateur. Résultat : les matchers asymétriques sont maintenant joliment formatés, nous avons ajouté le nouveau matcher expect.stringContaining() et nous les avons associés à expect.toMatchObject() pour combiner le meilleur des deux :

Mocks manuels améliorés

Avec cette dernière version, les mocks manuels fonctionnent enfin avec des dossiers imbriqués. Par exemple, __mocks__/react-native/Libraries/Text/Text.js fonctionnera désormais comme prévu pour mocker le bon module. Nous avons aussi corrigé les problèmes avec les mocks virtuels et les dépendances transitives, et amélioré moduleNameMapper pour ne pas écraser les mocks lorsque plusieurs motifs mappent vers le même fichier.

Changements cassants

Dans le cadre de nos nettoyages et corrections, nous avons supprimé l'option de configuration mocksPattern qui n'a jamais été officiellement supportée. Nous avons aussi renommé l'option testPathDirs en roots pour mieux expliquer son utilité. La configuration par défaut de roots est ["<rootDir>"] et peut être personnalisée pour inclure plusieurs répertoires. L'option rootDir a toujours été principalement utilisée comme token pour d'autres configurations, et ce renommage devrait clarifier la configuration de Jest.

Documentation repensée

Comme vous avez peut-être déjà vu, Hector Ramos et Kevin Lacker ont donné un nouveau look à la documentation de Jest. Nous avons changé l'organisation du site qui présente désormais les Docs et l'API comme des pages séparées :

• Dans la section Docs, vous trouverez une introduction à Jest, incluant Premiers pas ou Tester du code asynchrone, ainsi que des guides pratiques comme les Tests par snapshot, Tester une application React Native, Utilisation avec webpack ou Migrer vers Jest et bien plus encore !

• La section API liste quant à elle toutes les méthodes exposées par Jest : les objets expect et jest, les fonctions mock, les globales, ainsi que les options de configuration du package.json et de la CLI.

La page d'accueil a été entièrement repensée pour mieux décrire ce qu'est Jest : « Plateforme de test sans configuration ». Nous nous sommes aussi assurés qu'elle soit plus lisible sur mobile. Et pour ceux qui utilisent RSS – nous proposons enfin un flux pour notre blog.

Actualités de la communauté

• Nous avons adoré cette conférence : « Introduction à Jest » par Vas Boroviak.

• Suivez @jestjs_ sur Twitter.

• L'équipe principale de Jest se synchronise une fois par semaine pour discuter des problèmes actuels et futurs. Si vous souhaitez contribuer à Jest, faites-le nous savoir, soumettez des pull requests et rejoignez nos réunions hebdomadaires.

• Les ingénieurs d'Artsy ont écrit un article sur Jest dans leur stack frontend 2017.

• Stephen Scott a écrit un article détaillé sur le test de composants React où il pèse le pour et le contre des différentes approches.

• Utiliser Jest avec vue.js est devenu beaucoup plus simple grâce au billet de blog de Cristian Carlesso.

• Michele Bertoli a écrit un livre sur les design patterns et bonnes pratiques React qui consacre une section entière à Jest.

• Amélioration de la commande --notify qui affiche une notification système et peut désormais aussi relancer les tests depuis la notification. C'est en fait une fonctionnalité de Jest, et nous vérifions simplement si vous lisez toujours ce billet de blog.

• Jest fait désormais partie de react-boilerplate.

• Découvrez les pouvoirs cachés des matchers de Jest.

Enfin, nous sommes heureux d'annoncer que le runner de tests ava a adopté des parties de la plateforme Jest et propose désormais un support basique des snapshots et utilise pretty-format. La consolidation de l'infrastructure de test facilite l'apprentissage du test d'applications et permet de partager les meilleures pratiques. Nous avons hâte de découvrir ce que nous pourrons apprendre des bibliothèques de test existantes à l'avenir.

Le journal des modifications complet est disponible sur GitHub. Jest 19 est le fruit d'un véritable effort communautaire JavaScript avec 17 contributeurs pour cette version. Nous remercions chacun d'entre vous pour votre aide à rendre ce projet formidable.

Cet article de blog a été rédigé par Rogelio Guzman et Michał Pierzchała.