Tests unitaires avec Vue.js

Comme vu dans le cours de Native 2 et 3, les tests unitaires sont très importants pour assurer le fonctionnement du code rédigé par les développeurs en vérifiant que chaque portion de code isolée fonctionne adéquatement. De plus, ils aident beaucoup pour assurer la maintenance du projet car ce dernier peut subir des changements avec le passage du temps et les tests unitaires assurent que les ajouts ne cassent pas le reste du projet.

Vue Test Utils offre une série de fonctions utilitaires pour :

• Monter des composants en isolation.
• Simuler des interactions utilisateur.
• Tester les sorties rendues et les comportements attendus.

Vue Test Utils est souvent utilisée en conjonction avec des frameworks de tests tels que Jest, qui fournit un environnement de test complet avec des fonctionnalités comme les assertions, les simulations de fonctions et la surveillance des tests.

Pour intégrer Vue Test Utils et Jest dans un projet Vue.js, il faut suivre ces étapes-ci :

1- Installer les dépendances nécessaires :

npm install --save-dev @vue/test-utils jest

2- Configurer Jest :

Il faur créer un fichier jest.config.js à la racine du projet avec la configuration appropriée.

3- Écrire des tests :

Il faut créer un fichier de test, par exemple et utiliser Vue Test Utils pour monter le composant et effectuer des assertions.
Voici un exemple d'un test basique:

import { mount } from '@vue/test-utils'

// Le composant à tester
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg'],
};

test('affiche le message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Bonjour tout le monde',
    },
  });

  // Vérifier le texte rendu du composant
  expect(wrapper.text()).toContain('Bonjour tout le monde');
});

Dans ce test :

• Le composant est monté avec la méthode mount() de Vue Test Utils.
• Un prop contient la valeur: "Bonjour tout le monde".
• expect(wrapper.text()).toContain(...) est utilisée pour vérifier que le message est bien affiché dans le DOM.

Éxecuter les tests unitaires

Pour éxecuter un test unitaire, il suffit simplement d'utiliser la commande suivante:

npx jest

Références

• Octo: Tests unitaires en Vue.js avec vue-test-utils et Jest https://blog.octo.com/tests-unitaires-en-vue-js-avec-vue-test-utils-et-jest (page consultée le 14 février 2025)

• Documentation Vue.js: Vue Test Utils https://test-utils.vuejs.org/fr/guide/ (page consultée le 14 février 2025)