Aller au contenu principal

Jest 25 : 🚀 pose des fondations pour le futur

· 9 minutes de lecture
Simen Bekkhus
Simen Bekkhus

Jest 25 pose les bases de nombreux changements majeurs à l'avenir. Nous avons donc limité au maximum les changements de rupture, mais les modifications de l'architecture interne peuvent nécessiter une attention particulière pendant la mise à niveau. Les principaux changements sont une mise à niveau de JSDOM de la v11 à la v15, des tests 10-15% plus rapides, une nouvelle vue diff pour les instantanés périmés et l'abandon du support de Node 6.

There has been more than 200 commits since Jest 24.9 by more than 80 different contributors, so as always, take a look at the changelog for a full list of changes.

Au revoir Node 6

Node 6 est en fin de vie depuis le 30 avril 2019, et Jest 25 le laisse derrière lui. L'abandon de Node 6 signifie que nous pouvons mettre à jour nos dépendances, la principale étant JSDOM, qui a été mise à jour à la version 15. Upgrading also means we no longer have to transpile async-await syntax, which results in both faster code execution and less memory consumption. En prime, le code transpilé de Jest devrait être plus facile à déboguer si quelqu'un se retrouve à dévaler cette pente.

Même si Node 8 est également entré en fin de vie, Jest 25 continuera à le prendre en charge afin de rendre la mise à niveau aussi facile que possible pour ceux d'entre nous qui prennent encore en charge Node 8. It does come with some tradeoffs though, such as JSDOM v16 having been released without Node 8 support, so you'll need to use jest-environment-jsdom-sixteen if you want to use the latest version.

Améliorations des performances

Nous avons reçu des rapports indiquant que Jest a ralenti au cours des deux dernières versions. Jest 25 comprend une mise à jour de Micromatch, qui apporte des gains énormes en temps de démarrage, et quelques corrections de bogues et ajustements de performance qui ramène Jest à la vitesse à laquelle il était pour Jest 23. Pour Jest lui-même, comme mentionné au début de cet article, cela signifie une réduction de 10-15% du temps d'exécution des tests. Bien entendu, nous cherchons toujours à nous améliorer, alors n'hésitez pas à comparer les résultats avec ceux des versions précédentes et à signaler les problèmes qui pourraient survenir !

Couverture de code V8

Jest’s current code coverage instrumentation is powered by babel-plugin-istanbul inserting code coverage collection code before creating reports. Cependant, cette méthode est assez lente et gourmande en mémoire, surtout pour les fichiers et les bases de code volumineux. Luckily, V8 has built-in code coverage, which is becoming more and more usable in Node thanks to the hard work of Benjamin Coe and others on the V8 and Node.js teams. Jest 25 comes with experimental support for this via a new --coverage-provider flag. Please see its documentation for caveats and how to use it.

Penser vite et lentement quand les tests échouent

Les efforts inutiles pour interpréter les rapports en cas d'échec des tests sont un frein :

  • « penser rapidement » pour reconnaître les modèles de votre expérience passée
  • « penser lentement » pour analyser les changements et décider s'il s'agit de progrès attendus ou de régressions inattendues

Jest 25 achève la seconde moitié d'un effort commencé en Jest 24 pour améliorer tous les comparateurs :

  • correct description line, including .rejects, .resolves, and .not modifiers
  • des libellés concis et un alignement uniforme pour les valeurs attendues et reçues
  • inverse la mise en évidence des différences de sous-chaînes lorsque attendu et reçu sont des chaînes de caractères
  • nombre de lignes modifiées dans les différences pour savoir si c'est seulement des suppressions ou des insertions

Special thanks to Jest maintainer Mark Pedrotti for driving this effort and his continued work towards making expectation errors as good as they can be.

Couleurs des différences lorsque les tests de snapshot échouent

Le changement le plus évident pour remplacer la confusion par la confiance est la couleur des lignes de changement dans les différences lorsque les tests snapshot échouent :

  • - Snapshot changes from green to magenta
  • + Received changes from red to teal foreground on cyan/aqua background

Exemples de rapports de tests (avant à gauche et après à droite)

  1. Le nombre de lignes modifiées confirme votre première impression : dans quel sens le snapshot a-t-il changé (c'est-à-dire, lignes supprimées ou insérées)

snapshot-insert-lines

  1. Les couleurs de fond attirent vos yeux pour comparer les lignes modifiées adjacentes

snapshot-change-lines

  1. Background colors also help you see which toThrow tests require a decision whether or not to update the snapshot

snapshot-change-substrings

Voici quelques raisons pour lesquelles nous avons choisi des couleurs uniques :

  • Pour 95 % des personnes qui ont une vision complète des couleurs, elles peuvent reconnaître rapidement les rapports provenant de tests snapshot par rapport à tous les autres comparateurs.
  • Cela résout le conflit direct entre la signification du vert/rouge dans les tests Jest et le rouge/vert dans la révision du code.
  • Contrairement à l'inversion rouge/vert qui suggère que la mise à jour est la décision par défaut, ceci suggère que les différences nécessitent un examen plus attentif pour une éventuelle régression dans les échecs des tests snapshot locaux que dans la révision du code (lorsque les problèmes ont déjà été corrigés).

La différence de teinte entre le magenta à 300° et le sarcelle/cyan/aqua à 180° donne une meilleure accessibilité à la vision des couleurs et la teinte de fond claire pour les lignes modifiées donne un contraste cohérent sur les thèmes clairs et foncés.

If you maintain a command line tool, you might find inspiration to improve its accessibility in #9132.

Prise en charge des modules ECMAScript

Node 13 a un support ESM non signalé, et nous avons commencé à travailler un tout petit peu vers un support natif dans Jest. Jest 25 includes support for jest.config.cjs and jest.config.mjs configuration files, but tests themselves cannot yet be written using ESM without something like Babel or TypeScript transforming it into CJS.

Les API que Jest utilisera sont encore marquées et expérimentales, donc ne vous attendez pas à un support immédiat. These APIs are something the Node.js Modules team is actively working on, and we'll be keeping an eye on it moving forward and experiment with them so we can provide feedback. You can subscribe to this issue to get any updates about the implementation status in Jest.

Autres améliorations et mises à jour

  • Jest has passed 1000 unique contributors. C'est une étape incroyable ! Merci à tous ceux qui nous aident à rendre les tests aussi agréables que possible.
  • Thanks to community member Josh Rosenstein, Jest now comes with support for BigInt in most matchers, such as toBeGreaterThan. Jest comprend également les littéraux bigint immédiatement.
  • Jest’s feature --detect-leaks has been broken for Node 12 and newer - this has been fixed in Jest 25.
  • Comme annoncé dans l'article du blog de Jest 24, la base de code de Jest a été réécrite en TypeScript - ce travail a été achevé dans Jest 24.3. Ainsi, si vous utilisez l'une des parties individuelles de Jest, vous devriez bénéficier d'une excellente intégration avec l'IDE. Pour l'avenir, nous voulons vraiment faire en sorte que les simulations de Jest jouent mieux avec les systèmes de type, et nous aimerions que la communauté nous aide à cet égard. Please chime in here with ideas and send PRs! Nous allons également étudier le déplacement des typages pour l'utilisation de Jest en tant qu'exécuteur de tests de DefinitelyTyped vers Jest lui-même.
  • The jest-diff package now exports functions like diffLinesUnified and diffStringsUnified which have configuration options, so other applications can format differences in a custom way. For more information and code examples, see its new README.md file in the Jest repository or on package repositories.
  • Thanks to community member Wei An Yen, Jest will no longer highlight passing asymmetric matchers in expectation errors. Il s'agit d'un problème de longue date avec les comparateurs asymétriques et nous sommes très heureux qu'il soit enfin résolu.
  • For the second year running, Jest won the Highest Satisfaction award from State of JS. Nous sommes incroyablement reconnaissants pour le soutien de la communauté et espérons que nous pourrons tirer parti de cet élan pour rendre 2020 encore meilleure !

Plans pour l'avenir

  • Jest’s configuration is vast and somewhat clunky - there is often at least two ways of doing the same thing, oftentimes even more. Pour Jest 26, nous espérons condenser la configuration et la rendre plus prévisible. See this issue for details.
  • Nous espérons également être en mesure de fournir une API programmatique appropriée pour l'exécution de Jest, afin de faciliter l'intégration dans les IDE et autres outils. Please see this tracking issue.
  • Il y a eu un PR ouvert pour l'ajout de Lolex comme implémentation des temporisateurs fictifs de Jest depuis décembre 2017. Bien que nous ne l'ajoutons pas à une API publique dans Jest 25, son support est techniquement inclus et nous cherchons comment l'exposer pour que les gens puissent le tester et l'expérimenter. Using it means you can mock out Date and other timer function Jest currently doesn’t touch. Notez que cela doit être considéré comme expérimental, et un support API approprié viendra dans une version ultérieure. Follow this PR for the latest updates on the status.

Happy Jesting ! 🃏