Les tests unitaires dans VueJs avec Vue Test Utils

Les tests unitaires sont une partie importante du développement. En effet, ils permettent de valider que chaque composant fonctionne toujours correctement. Dans cet article, nous allons découvrir comment utiliser Vue Test Utils et Jest pour tester les composants d’une application VueJs.

Pourquoi utiliser des tests unitaires dans VueJs

Les tests unitaires sont là pour garantir qu’après chaque modification que vous effectuez, tout fonctionne encore correctement dans votre application. Un test unitaire teste un composant VueJS. Ainsi, les tests unitaires vous garantissent une application stable à tout moment.

Dans le cas de VueJs, il existe une bibliothèque « Vue Test Utils » qui est justement conçue pour faciliter la création des tests unitaires pour les composants.

Installation de Vue Test Utils et Jest

Pour pouvoir exécuter des tests unitaires, on doit avoir la bibliothèque Jest.

Pour faciliter l’écriture du code des tests en utilisant des wrappers (que nous verrons par la suite), on va installer Vue Test Utils.

Pour ces 2 bibliothèques : soit vous avez sélectionné tout ce qu’il fallait lors de la création du projet avec VueCLI « vue create » (choisir manuellement les options et cocher UnitTests puis Jest), soit vous pouvez encore après coup, installer les bibliothèques.

Pour se faire il suffit de lancer notre IDE et aller dans un terminal taper la commande suivante :

npm install --save-dev @vue/test-utils
npm install --save-dev @vue/cli-plugin-unit-jest

Création de notre projet de tests unitaires pour VueJs

Pour faire un unittest il faut évidemment un projet avec un composant à tester. Nous allons donc créer un projet VueJs avec un simple composant qui comprend :

• Une donnée (data) « message »
• Un bouton qui change la propriété « message » par « Button clicked. » quand on clique dessus et affiche ce message dans la page html

Pour se faire, on va déjà créer notre projet via la commande habituelle :

vue create test-unittests

Ensuite on va créer notre composant avec une partie template html et une partie code javascript VueJs dans un fichier .vue. Pour plus d’informations, vous pouvez aller voir mon article sur les composants dans VueJs. Voici donc le code de notre composant MyComponent.vue à placer dans le sous-dossier /src/components :

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="onClick"/>
  </div>
</template>

<script>

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onClick() {
      console.log('Button clicked');
      this.message = "Button clicked.";
    } 
  }
};
</script>

Création d’un test unitaire avec Vue Test Utils

Maintenant que nous avons notre composant, nous allons le tester en utilisant 2 manières différentes. Chaque manière de faire sera expliquée ici par un test différent.

Imports

Commençons par créer notre fichier de test dans /tests/unit -> nom du fichier : MyComponent.spec.ts (extension pour les unittests). Nous allons avoir besoin de la méthode « mount » qui vient de la bibliothèque Vue Test Util et de notre composant :

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

« mount » sert en fait à créer un wrapper autour de notre composant pour le manipuler.

Test simple

Commençons par notre premier test qui va directement modifier la donnée « message » de notre composant et vérifier si le visuel html de notre composant affiche bien la valeur que nous avons assignée à « message ». Voici le code :

test(‘Check if setting data update html.’, async () => {

    const wrapper = mount(MyComponent);

    await wrapper.setData({ message: ‘Test.’ });

    expect(wrapper.find(‘h1’).text()).toContain(‘Test.’);

});

On crée donc notre wrapper avec « mount », ensuite on set la donnée « message » avec le texte « Test. » et on récupère la balise « h1 » du html pour vérifier que son texte contient bien « Test. ».

Test d’intégration

A présent, voyons la deuxième manière de faire. Nous allons cliquer sur le bouton et vérifier que la balise h1 de notre html prend bien le texte « Button clicked. ». Pour se faire, voici le code du second test à placer toujours dans le même fichier à la suite de l’autre test :

test('Check if clicking the button update message in html.', async () => {
    const wrapper = mount(MyComponent);

    await wrapper.find('button').trigger('click');
    expect(wrapper.find('h1').text()).toContain('Button clicked.');
});

Ici, on crée de nouveau un wrapper, on cheche le boutond avec « find » et on déclenche l’évènement « click ». En bref, on déclenche le click du bouton. Ensuite, on récupère notre balise « h1 » de notre html et on vérifie que le texte de cette balise contient bien « Button clicked. ».

Exécution des unit tests

A présent, pour lancer le unitest, on va utiliser une commande :

npm run test:unit

Pour terminer

Vous avez donc pu voir l’importance des tests unitaires et comment en créer facilement grâce à Vue Test Utils et Jest. J’espère que cet article vous aura plu. N’hésitez pas à vous abonner pour rester au courant des nouveautés. Vous pouvez aussi me laisser des commentaires, liker et partager.

A bientôt sur ce blog pour d’autres articles qui j’en suis certain vous intéresseront tout autant.