Maîtrisez Vue.js : Créez des Interfaces Utilisateur Réactives et Performantes
Maîtrisez Vue.js : Créez des Interfaces Utilisateur Réactives et Performantes

Tests Unitaires et d'Intégration des Applications Vue.js

Introduction

Dans le monde du développement logiciel moderne, la qualité et la fiabilité d'une application sont primordiales. Pour les applications Vue.js, cela signifie garantir que nos composants fonctionnent comme prévu, qu'ils interagissent correctement les uns avec les autres, et que toute modification future n'introduise pas de régressions inattendues. C'est précisément là que les tests entrent en jeu.

Cette leçon vous guidera à travers les concepts fondamentaux des tests unitaires et d'intégration pour les applications Vue.js. Nous explorerons pourquoi tester est crucial, quels outils utiliser, et comment écrire des tests efficaces pour vos composants et votre logique applicative. L'objectif est de vous fournir les compétences nécessaires pour construire des applications Vue.js fiables, robustes et facilement maintenables.

1. Comprendre les Tests en Vue.js

Avant de plonger dans le code, il est essentiel de comprendre les différents types de tests et les outils qui composent l'écosystème de test Vue.js.

1.1 Types de Tests

Bien qu'il existe de nombreuses catégories de tests, nous nous concentrerons sur les deux plus pertinentes pour le développement de composants : les tests unitaires et les tests d'intégration.

Tests Unitaires (Unit Tests)

  • Objectif : Vérifier la plus petite "unité" isolable de votre code. Pour Vue.js, cela signifie généralement un composant individuel, une fonction utilitaire, ou un module Pinia/Vuex spécifique.
  • Isolation : Les tests unitaires sont conçus pour tester un élément en isolation complète de ses dépendances externes (API, autres composants, routeur, etc.). Si une dépendance est nécessaire, elle est généralement "moquée" (simulée).
  • Avantages :
    • Rapidité : Ils s'exécutent très vite car ils ne dépendent pas de ressources externes.
    • Détection précoce : Permettent de trouver des bugs dans les fonctions ou composants de base très tôt dans le cycle de développement.
    • Confiance en la refactorisation : Vous pouvez modifier le code interne d'une unité sans crainte, tant que ses entrées/sorties (API) restent inchangées et que les tests passent.

Tests d'Intégration (Integration Tests)

  • Objectif : Vérifier que différentes unités de votre application travaillent correctement ensemble. Pour Vue.js, cela peut signifier tester l'interaction entre un composant parent et ses composants enfants, la communication avec un store (Pinia/Vuex), ou l'interaction avec le routeur.
  • Portée : Plus large que les tests unitaires. Ils testent les chemins de données et les flux de contrôle à travers plusieurs unités.
  • Avantages :
    • Détection des problèmes d'interaction : Révèlent les bugs qui apparaissent lorsque des unités individuelles, bien que fonctionnelles isolément, échouent à communiquer correctement.
    • Confiance accrue : Couvrent des scénarios utilisateur plus réalistes que les tests unitaires seuls.

Note sur les Tests End-to-End (E2E) : Ces tests simulent une interaction utilisateur complète avec l'application dans un navigateur réel, de bout en bout (par exemple, cliquer sur des boutons, remplir des formulaires, vérifier les redirections). Bien qu'essentiels pour la qualité globale, ils sont plus lents et plus complexes à maintenir. Des outils comme Cypress ou Playwright sont utilisés pour ce type de tests, mais ils dépassent le cadre direct de cette leçon centrée sur les outils Vue.js spécifiques pour les tests unitaires et d'intégration.

1.2 Les Outils Essentiels

Pour tester vos applications Vue.js, vous aurez besoin de quelques outils clés :

  • Vitest (ou Jest) : C'est votre framework de test et runner. Il fournit l'environnement pour exécuter vos tests, les fonctions d'assertion (expect), et des utilitaires de "mocking". Vitest est le choix recommandé pour les projets Vue 3 utilisant Vite, grâce à sa rapidité et à son intégration native avec l'écosystème Vite. Jest est une alternative plus ancienne mais toujours très utilisée.
  • Vue Test Utils (VTU) : C'est la bibliothèque officielle de tests pour Vue.js. Elle fournit des utilitaires de haut niveau pour monter vos composants Vue en isolation ou dans un arbre de composants, interagir avec eux (simuler des clics, entrées), inspecter leur état, et vérifier leur rendu. VTU est l'interface entre votre code Vue et Vitest.
  • Happy DOM (ou JSDOM) : Un environnement de navigateur léger et minimaliste en JavaScript. Lorsque vous exécutez des tests en ligne de commande, il n'y a pas de navigateur réel. Happy DOM (ou JSDOM, utilisé par Jest par défaut) simule les API du DOM pour que vos composants Vue puissent être rendus et manipulés comme s'ils étaient dans un navigateur.

2. Tests Unitaires avec Vue Test Utils et Vitest

Commençons par écrire notre premier test unitaire. Nous allons tester un composant Vue simple.

2.1 Configuration de l'Environnement

Si vous avez créé votre projet Vue 3 avec Vite, Vitest est très facile à intégrer. Lors de l'initialisation d'un nouveau projet Vue avec npm init vue@latest, vous avez la possibilité d'ajouter Vitest directement.

Si vous devez l'ajouter manuellement à un projet existant :

npm install -D vitest @vue/test-utils happy-dom
# ou
yarn add -D vitest @vue/test-utils happy-dom

Ensuite, vous devez configurer vitest dans votre vite.config.js (ou vitest.config.js si vous préférez un fichier séparé) pour utiliser l'environnement happy-dom :

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // --- Configuration spécifique à Vitest ---
  test: {
    environment: 'happy-dom' // Utilise Happy DOM pour simuler le navigateur
  }
})

Enfin, ajoutez un script de test à votre package.json :

{
  "scripts": {
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

Vous pouvez maintenant exécuter vos tests avec npm run test ou npm run test:watch.

2.2 Tester un Composant Simple

Considérons un composant simple MessageDisplay.vue qui affiche un message et une option pour changer le message.

Composant src/components/MessageDisplay.vue

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
    <button @click="changeMessage">Changer le Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: 'Bienvenue'
  },
  initialMessage: {
    type: String,
    default: 'Ceci est votre message initial.'
  }
});

const message = ref(props.initialMessage);

function changeMessage() {
  message.value = 'Le message a été modifié !';
}
</script>

<style scoped>
/* Styles simples pour l'exemple */
div {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}
h2 {
  color: #333;
}
p {
  color: #555;
}
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
</style>

Test Unitaire src/components/MessageDisplay.test.js

Créez un fichier de test (souvent à côté du composant ou dans un dossier __tests__) :

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

// `describe` regroupe des tests logiquement liés
describe('MessageDisplay', () => {

  // Test 1: Vérifier le rendu avec les props par défaut
  it('renders with default props', () => {
    // `shallowMount` monte le composant sans rendre ses enfants (si présents),
    // idéal pour les tests unitaires afin d'isoler le composant.
    const wrapper = shallowMount(MessageDisplay);

    // `wrapper.find('h2')` trouve l'élément <h2>
    // `wrapper.find('h2').text()` obtient le texte de cet élément
    expect(wrapper.find('h2').text()).toBe('Bienvenue');
    expect(wrapper.find('p').text()).toBe('Ceci est votre message initial.');
  });

  // Test 2: Vérifier le rendu avec des props personnalisées
  it('renders with custom props', () => {
    const wrapper = shallowMount(MessageDisplay, {
      props: {
        title: 'Titre Personnalisé',
        initialMessage: 'Nouveau message de test.'
      }
    });

    expect(wrapper.find('h2').text()).toBe('Titre Personnalisé');
    expect(wrapper.find('p').text()).toBe('Nouveau message de test.');
  });

  // Test 3: Vérifier le changement de message après un clic sur le bouton
  it('changes message when button is clicked', async () => {
    const wrapper = shallowMount(MessageDisplay);

    // `wrapper.find('button').trigger('click')` simule un clic sur le bouton
    // Utilisez `await` car les mises à jour du DOM sont asynchrones dans Vue
    await wrapper.find('button').trigger('click');

    // Vérifie que le texte du paragraphe a été mis à jour
    expect(wrapper.find('p').text()).toBe('Le message a été modifié !');
  });
});

Explication du code de test :

  • import { describe, it, expect } from 'vitest';: Importe les fonctions de base de Vitest.
    • describe: Permet de regrouper un ensemble de tests liés.
    • it (ou test): Définit un cas de test individuel.
    • expect: Utilisé pour faire des assertions sur les valeurs.
  • import { mount, shallowMount } from '@vue/test-utils';: Importe les fonctions de montage de Vue Test Utils.
    • shallowMount(Component, options): Monte le composant Component mais stubs (simule des versions vides) tous ses composants enfants. C'est idéal pour les tests unitaires car cela garantit que vous testez uniquement l'unité que vous avez l'intention de tester, sans interférence des enfants.
    • mount(Component, options): Monte le composant et rend complètement tous ses composants enfants. Utile pour les tests d'intégration où vous voulez tester l'interaction entre parents et enfants.
  • const wrapper = shallowMount(MessageDisplay, { props: { ... } });: Crée une instance du composant et la monte. Le wrapper est un objet qui enveloppe le composant monté et fournit des méthodes pour l'interroger et interagir avec lui.
  • wrapper.find('h2'): Permet de trouver un élément HTML par son sélecteur CSS. Il existe aussi findAll, get, text, html, etc.
  • expect(...).toBe(...): Une assertion Vitest. Il existe de nombreuses autres méthodes d'assertion comme toEqual, toContain, toBeTruthy, toHaveBeenCalled, etc.
  • await wrapper.find('button').trigger('click');: Simule un événement DOM (ici, un clic). L'utilisation de await est cruciale car les mises à jour réactives de Vue après une interaction sont asynchrones.

2.3 Tester des Événements et des Méthodes

Pour un composant qui émet un événement, vous pouvez le tester en vérifiant si l'événement a été émis et avec quelles données.

<!-- src/components/CounterButton.vue -->
<template>
  <button @click="increment">
    Compteur: {{ count }}
  </button>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const count = ref(0);
const emits = defineEmits(['incremented']);

function increment() {
  count.value++;
  emits('incremented', count.value);
}
</script>

// src/components/CounterButton.test.js
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import CounterButton from './CounterButton.vue';

describe('CounterButton', () => {
  it('increments count and emits "incremented" event on click', async () => {
    const wrapper = shallowMount(CounterButton);

    // Vérifier l'état initial
    expect(wrapper.text()).toContain('Compteur: 0');

    // Simuler un clic
    await wrapper.find('button').trigger('click');

    // Vérifier que le compteur a augmenté
    expect(wrapper.text()).toContain('Compteur: 1');

    // Vérifier que l'événement 'incremented' a été émis
    // `wrapper.emitted()` retourne un objet des événements émis
    // `wrapper.emitted().incremented` retourne un tableau de tous les appels à cet événement
    // Chaque appel est un tableau d'arguments passés à l'événement
    expect(wrapper.emitted().incremented).toBeTruthy(); // L'événement a été émis
    expect(wrapper.emitted().incremented[0]).toEqual([1]); // Le premier appel a émis la valeur 1
  });

  // Vous pouvez aussi appeler directement les méthodes du composant si elles sont exposées
  // (ce qui est moins courant avec <script setup> qui tend à cacher les méthodes internes)
  // ou si vous testez une fonction utilitaire séparée.
});

2.4 Mocking (Moqueries)

Le mocking est une technique cruciale en tests unitaires pour isoler l'unité de code testée. Il s'agit de remplacer les dépendances réelles (appels API, modules externes, services) par des versions contrôlées et simplifiées.

Par exemple, si votre composant fait un appel API :

// src/services/api.js
export async function fetchData() {
  const response = await fetch('/api/data');
  return response.json();
}

<!-- src/components/DataFetcher.vue -->
<template>
  <div>
    <p v-if="loading">Chargement...</p>
    <p v-else-if="error">Erreur: {{ error }}</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { fetchData } from '@/services/api'; // Importation de l'API

const data = ref(null);
const loading = ref(true);
const error = ref(null);

onMounted(async () => {
  try {
    data.value = await fetchData();
  } catch (e) {
    error.value = e.message;
  } finally {
    loading.value = false;
  }
});
</script>

Pour tester DataFetcher.vue, nous ne voulons pas faire un vrai appel réseau. Nous allons moquer fetchData :

// src/components/DataFetcher.test.js
import { describe, it, expect, vi } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import DataFetcher from './DataFetcher.vue';
import { fetchData } from '@/services/api'; // Import de la fonction à moquer

// Moquer le module 'api' pour intercepter fetchData
vi.mock('@/services/api', () => ({
  fetchData: vi.fn(() => Promise.resolve('Données simulées')) // Simule un appel réussi
}));

describe('DataFetcher', () => {
  it('fetches and displays data on mount', async () => {
    // Monte le composant
    const wrapper = shallowMount(DataFetcher);

    // S'assure que la fonction fetchData a été appelée
    expect(fetchData).toHaveBeenCalled();

    // Attend que les mises à jour asynchrones soient terminées
    await vi.waitFor(() => {
      // Vérifie que l'état de chargement est terminé et les données sont affichées
      expect(wrapper.find('p').text()).toBe('Données simulées');
      expect(wrapper.find('p').exists()).toBe(true); // Assure que le paragraphe est présent
    });
  });

  it('displays error message on fetch failure', async () => {
    // Réinitialise le mock pour simuler un échec
    fetchData.mockImplementationOnce(() => Promise.reject(new Error('Erreur API')));

    const wrapper = shallowMount(DataFetcher);

    await vi.waitFor(() => {
      expect(wrapper.find('p').text()).toBe('Erreur: Erreur API');
    });
  });
});

Explication du mocking :

  • vi.mock('@/services/api', () => ({ fetchData: vi.fn(...) }));: C'est la ligne clé. Elle indique à Vitest de remplacer le module @/services/api par un objet contenant une fonction fetchData qui est un mock. vi.fn() crée une fonction mockable qui vous permet de suivre si elle a été appelée et de contrôler son comportement (valeurs de retour, erreurs).
  • fetchData.mockImplementationOnce(...): Permet de définir le comportement du mock pour un appel spécifique ou pour un test en particulier.
  • await vi.waitFor(...): Pour les opérations asynchrones comme les appels API (même moqués), vi.waitFor est utile pour attendre que le DOM soit mis à jour après la résolution d'une promesse.

3. Tests d'Intégration avec Vue Test Utils et Vitest

Les tests d'intégration vont un cran plus loin en vérifiant comment plusieurs unités (composants, store, routeur) interagissent. Pour ces tests, mount de Vue Test Utils est souvent préférable à shallowMount.

3.1 Quand utiliser les Tests d'Intégration ?

  • Interaction Parent-Enfant : Tester si un composant parent répond correctement aux événements émis par ses enfants, ou si les props sont passées correctement.
  • Intégration avec le Store (Pinia/Vuex) : Tester qu'un composant lit et/ou modifie l'état global via le store.
  • Intégration avec le Routeur (Vue Router) : Tester les navigations déclenchées par un composant.
  • Composants de Formulaire : Tester le flux de données à travers plusieurs champs, la validation, et la soumission.

3.2 Tester l'Interaction Parent-Enfant

Considérons un composant UserList.vue qui affiche une liste d'utilisateurs en utilisant un composant enfant UserItem.vue. Le UserList gère une sélection.

Composant Enfant src/components/UserItem.vue

<template>
  <div :class="{ 'user-item': true, 'selected': isSelected }" @click="selectUser">
    {{ user.name }} ({{ user.email }})
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  user: {
    type: Object,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['user-selected']);

function selectUser() {
  emits('user-selected', props.user.id);
}
</script>

<style scoped>
.user-item {
  padding: 10px;
  border: 1px solid #eee;
  margin-bottom: 5px;
  cursor: pointer;
  background-color: #f9f9f9;
  border-radius: 4px;
}
.user-item.selected {
  background-color: #e0f7fa;
  border-color: #00bcd4;
  font-weight: bold;
}
.user-item:hover {
  background-color: #e9e9e9;
}
</style>

Composant Parent src/components/UserList.vue

<template>
  <div>
    <h3>Liste des Utilisateurs</h3>
    <div v-if="selectedUser">
      Utilisateur sélectionné: {{ selectedUser.name }}
    </div>
    <div v-for="user in users" :key="user.id">
      <UserItem
        :user="user"
        :isSelected="user.id === selectedUserId"
        @user-selected="handleUserSelected"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import UserItem from './UserItem.vue';

const users = ref([
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com' }
]);

const selectedUserId = ref(null);
const selectedUser = ref(null);

function handleUserSelected(userId) {
  selectedUserId.value = userId;
  selectedUser.value = users.value.find(user => user.id === userId);
}
</script>

Test d'Intégration src/components/UserList.test.js

import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import UserList from './UserList.vue';
import UserItem from './UserItem.vue'; // Import du composant enfant pour vérifier son existence

describe('UserList Integration', () => {
  it('renders UserItem components and handles user selection', async () => {
    // Utilise `mount` pour rendre les composants enfants
    const wrapper = mount(UserList);

    // Vérifie que les UserItem sont rendus
    const userItems = wrapper.findAllComponents(UserItem);
    expect(userItems.length).toBe(3); // On s'attend à 3 UserItem

    // Vérifie l'état initial (aucun utilisateur sélectionné)
    expect(wrapper.find('div').text()).not.toContain('Utilisateur sélectionné');

    // Simule un clic sur le premier utilisateur (Alice)
    await userItems[0].trigger('click');

    // Vérifie que le parent a mis à jour son état et affiche l'utilisateur sélectionné
    expect(wrapper.find('div').text()).toContain('Utilisateur sélectionné: Alice');

    // Vérifie que la classe 'selected' est appliquée au bon UserItem
    expect(userItems[0].classes()).toContain('selected');
    expect(userItems[1].classes()).not.toContain('selected');
    expect(userItems[2].classes()).not.toContain('selected');

    // Simule un clic sur le deuxième utilisateur (Bob)
    await userItems[1].trigger('click');

    // Vérifie que la sélection a changé
    expect(wrapper.find('div').text()).toContain('Utilisateur sélectionné: Bob');
    expect(userItems[0].classes()).not.toContain('selected'); // Alice n'est plus sélectionnée
    expect(userItems[1].classes()).toContain('selected');    // Bob est sélectionné
  });
});

Explication du code de test d'intégration :

  • import { mount } from '@vue/test-utils';: Nous utilisons mount ici pour nous assurer que UserItem est réellement rendu et que ses interactions sont testées.
  • wrapper.findAllComponents(UserItem);: Cette méthode est très utile pour trouver toutes les instances d'un composant spécifique rendu par le composant monté. Cela nous permet d'interagir avec eux (simuler des clics sur userItems[0]).
  • Le test simule un flux utilisateur : cliquer sur un utilisateur, puis un autre, et vérifier que l'interface utilisateur (le texte "Utilisateur sélectionné" et les classes CSS) reflète les changements d'état attendus dans le composant parent.

3.3 Tester avec Pinia (ou Vuex) Store

Pour tester les composants qui interagissent avec un store Pinia, vous pouvez le fournir lors du montage du composant.

// src/stores/counter.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
});

<!-- src/components/CounterView.vue -->
<template>
  <div>
    <p>Le compteur est à : {{ counterStore.count }}</p>
    <button @click="counterStore.increment">Incrémenter</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
</script>

// src/components/CounterView.test.js
import { describe, it, expect, beforeEach } from 'vitest';
import { mount } from '@vue/test-utils';
import { createPinia, setActivePinia } from 'pinia';
import CounterView from './CounterView.vue';
import { useCounterStore } from '@/stores/counter';

describe('CounterView', () => {
  // Initialise Pinia avant chaque test
  beforeEach(() => {
    setActivePinia(createPinia());
  });

  it('displays initial count and increments it on button click', async () => {
    const wrapper = mount(CounterView);
    const counterStore = useCounterStore(); // Accède au store une fois Pinia activé

    // Vérifie l'état initial
    expect(wrapper.find('p').text()).toContain('Le compteur est à : 0');
    expect(counterStore.count).toBe(0);

    // Simule un clic sur le bouton
    await wrapper.find('button').trigger('click');

    // Vérifie que le compteur dans le store a été mis à jour
    expect(counterStore.count).toBe(1);
    // Vérifie que l'affichage du composant a été mis à jour
    expect(wrapper.find('p').text()).toContain('Le compteur est à : 1');

    // Simule un autre clic
    await wrapper.find('button').trigger('click');
    expect(counterStore.count).toBe(2);
    expect(wrapper.find('p').text()).toContain('Le compteur est à : 2');
  });
});

Explication du test Pinia :

  • import { createPinia, setActivePinia } from 'pinia';: Ces fonctions sont nécessaires pour initialiser Pinia dans un environnement de test.
  • beforeEach(() => { setActivePinia(createPinia()); });: Il est crucial d'appeler setActivePinia(createPinia()) avant chaque test pour s'assurer que chaque test utilise une instance de store propre et isolée.
  • Ensuite, vous montez votre composant (CounterView) et vous pouvez interagir avec lui comme d'habitude. Vous pouvez aussi accéder directement au store via useCounterStore() dans votre test pour vérifier son état interne.

3.4 Tester avec Vue Router

Tester des composants qui utilisent Vue Router (par exemple, pour la navigation programmatique) nécessite de simuler le routeur.

// src/components/NavigationButton.vue
<template>
  <button @click="goToHomePage">Aller à l'Accueil</button>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

function goToHomePage() {
  router.push('/');
}
</script>

// src/components/NavigationButton.test.js
import { describe, it, expect, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import NavigationButton from './NavigationButton.vue';
import { createRouter, createWebHistory } from 'vue-router'; // Nécessaire pour simuler le routeur

describe('NavigationButton', () => {
  it('navigates to home page on click', async () => {
    // Crée un mock du routeur
    const mockRouter = createRouter({
      history: createWebHistory(),
      routes: [{ path: '/', component: { template: '<div>Home</div>' } }]
    });

    // Mocke la fonction push du routeur pour espionner ses appels
    mockRouter.push = vi.fn();

    // Monte le composant en fournissant le routeur mocké
    const wrapper = mount(NavigationButton, {
      global: {
        plugins: [mockRouter] // Injecte le routeur mocké dans le composant
      }
    });

    // Simule un clic sur le bouton
    await wrapper.find('button').trigger('click');

    // Vérifie que router.push a été appelé avec le bon argument
    expect(mockRouter.push).toHaveBeenCalledTimes(1);
    expect(mockRouter.push).toHaveBeenCalledWith('/');
  });
});

Explication du test Vue Router :

  • createRouter et createWebHistory sont utilisés pour créer une instance de routeur minimaliste.
  • mockRouter.push = vi.fn();: Nous remplaçons la méthode push du routeur par un mock de Vitest. Cela nous permet de vérifier si push a été appelée et avec quels arguments, sans réellement tenter une navigation.
  • global: { plugins: [mockRouter] }: C'est ainsi que vous "injectez" des plugins globaux comme le routeur ou Pinia dans le composant lors du montage avec Vue Test Utils.

Conclusion

Maîtriser les tests unitaires et d'intégration est une compétence inestimable pour tout développeur Vue.js. Ils constituent le filet de sécurité essentiel qui vous permet de développer de nouvelles fonctionnalités et de refactoriser du code existant avec confiance.

Nous avons couvert :

  • La distinction entre les tests unitaires (isolation, rapidité, focus sur une seule unité) et les tests d'intégration (interaction entre unités, scénarios utilisateur plus larges).
  • Les outils fondamentaux : Vitest comme runner/framework, Vue Test Utils pour monter et interagir avec les composants, et Happy DOM pour l'environnement DOM simulé.
  • Comment écrire des tests unitaires pour un composant simple, en testant les props, les interactions et les événements émis.
  • L'importance du mocking pour isoler les composants de leurs dépendances externes (comme les appels API).
  • Comment aborder les tests d'intégration en simulant les interactions entre composants parents/enfants, et l'intégration avec des outils clés comme Pinia et Vue Router.

En intégrant ces pratiques de test dans votre processus de développement, vous construirez des applications Vue.js non seulement performantes et réactives, mais aussi stables, maintenables et pérennes. N'oubliez pas : un code testé est un code de confiance !