Cours 13 - Tests avec Vitest

Table des matières

Objectifs

Déroulement

Introduction aux tests unitaires

Les tests unitaires, c'est un peu comme inspecter chaque brique, chaque porte, ou chaque fenêtre avant de construire la maison. Pour une application Vue.js, cela signifie tester les petits morceaux de code, comme les composants, pour s'assurer qu'ils font exactement ce pour quoi ils sont conçus. Cela permet de repérer rapidement les problèmes avant qu'ils ne deviennent plus complexes et plus coûteux à résoudre!

Pourquoi sont-ils importants ?

  1. Détection précoce des bogues : Il est plus facile et moins coûteux de corriger un bogue dans un petit morceau de code qu'après que ce code ait été intégré dans le reste de l'application.
  2. Simplification du débogage : Si un test unitaire échoue, vous savez exactement où chercher le problème.
  3. Documentation du code : Les tests unitaires fournissent une documentation vivante de votre code. Ils montrent clairement comment un morceau de code est censé être utilisé.
  4. Facilitation des changements : Lorsque vous modifiez ou mettez à jour votre code, les tests unitaires peuvent vous aider à vérifier que vous n'avez pas introduit de nouveaux bogues.

Et Vitest dans tout ça ?

Vitest est un framework de tests moderne pour JavaScript, optimisé pour Vue.js (et d'autres frameworks). Il s'intègre bien avec Vue.js et offre des fonctionnalités spécifiques pour tester efficacement les composants Vue. Avec Vitest, vous pouvez simuler le comportement des utilisateurs, comme cliquer sur un bouton ou entrer du texte, et vérifier que votre composant réagit comme prévu. C'est un outil puissant pour écrire, exécuter, et organiser vos tests unitaires, rendant le processus rapide et efficace.

Vitest vous aide à mettre en œuvre cette pratique de manière efficace, en vous fournissant les outils nécessaires pour tester vos composants Vue.js de manière isolée, rapide, et fiable.

Atelier 13 - Tests avec Vitest

Prérequis

Vidéo de présentation

Using Vue Test Utils in Vitest

À lire et consulter

Documentation officielle de Vitest
Très semblable à Jest, si vous en entendez parler.

Une nouvelle extension de VS Code à installer

Installation de Vitest

Pour installer Vitest, consulter le guide:
https://vitest.dev/guide/

Vidéo à écouter:
https://vueschool.io/lessons/how-to-install-vitest?friend=vueuse

Pour installer Vitest à partir de zéro

Dans un répertoire nommé atel13, écrivez la commande suivante:
Commande NPM

npm init vue@3

Questions à répondre:

Sélectionnez les fonctionnalités à inclure dans votre projet : (↑/↓ pour naviguer,
espace pour sélectionner, a pour tout sélectionner, entrée pour confirmer)

Ensuite, faire les commandes proposées à l'écran

Voilà une nouvelle manière de faire un projet avec Vue 3 en incluant les tests et d'autres fonctionnalités que l'on va voir plus tard
(store, route, etc.)

package.json
Aller voir le fichier package.json pour voir l'ajout de la librairie de tests
"test:unit": "vitest",
Astuce: si ça ne vous tente pas d'écrire npm run test:unit à chaque fois, renommer le script:
"test": "vitest",
Sauvegarder le fichier!

Utilisation de Vitest

Maintenant, on va utiliser la bête ;)

Vitest a deux manières de reconnaître un fichier de test:

Dans l'exemple installé, le test se nomme HelloWorld.spec.ts et il est dans un dossier nommé
test dans le dossier components

Dans le terminal de notre projet:
Commande NPM

npm run test

Vous devriez voir un test passer!

Allez voir le contenu de HelloWorld.spec.ts
La documentation de Vitest vous indique comment écrire un test:
https://vitest.dev/guide/#writing-tests

Il faut impérativement importer le composant que l'on veut tester!

import HelloWorld from '../HelloWorld.vue'

Si vous avez bien installé l'extension proposée, vous pourrez rouler les tests de manière individuelle:
CTDESKTOP_17-03-2025_33

Exercice supplémentaire

À partir d'un projet existant
Pour ajouter Vitest à un projet existant, suivre cette procédure, car celle dans les vidéos n'est pas parfaite :P

Commande NPM

npm install -D vitest
npm install -D @vue/test-utils@latest
npm install -D jsdom
npm install -D @types/jsdom

Note: -D veut dire pour développement seulement

Dans le fichier package.json, ajouter la ligne suivante dans la section scripts
"test": "vitest"

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },

IMPORTANT: N'oubliez pas la virgule de la ligne: "preview": "vite preview",

Finalement, ouf, il faut déposer un fichier de configuration dézippé de Vitest, à la racine de votre projet:
vitest.config.zip

Dans vos tests, n'oubliez pas d'importer, les éléments de test et le composant à tester:

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ChildComponent from '../ChildComponent.vue'

Ensuite:

th-1427569758