Cours 16 - Mise en place de tests

Table des matières

Objectifs

Déroulement

Rappel de la communication entre les composants

Ne jamais modifier le contenu d’un props.

"Toutes les données forment un flux de donnée descendant unidirectionnel (« one-way-down binding ») entre la propriété enfant et la propriété parente : quand la propriété du parent est mise à jour, cela va mettre à jour celle de l’enfant mais pas l’inverse. Cela empêche un composant enfant de muter accidentellement l’état du parent, ce qui rendrait le flux de données de votre application difficile à appréhender. De plus, chaque fois que le composant parent est mis à jour, toutes les props du composant enfant vont être mises à jour avec les dernières valeurs. Cela signifie que vous ne devriez pas essayer du muter une prop depuis l’intérieur d’un composant."

Plusieurs composants reçoivent des props ou émettent des emits. Vous allez apprendre comment les passer et les vérifier dans vos tests.

Guide pratique pour l'écriture de tests unitaires avec Vitest

Voici un guide étape par étape pour démarrer avec Vitest.

Configuration Initiale

Avant de commencer, assurez-vous que Vitest est installé et configuré dans votre projet. Si vous utilisez Vite, Vitest peut être facilement intégré.
Voir les instructions du cours précédant.

Écrire votre premier test

Un test unitaire typique avec Vitest suit cette structure :

// Importez les fonctions nécessaires et le composant à tester
import { describe, it, expect } from 'vitest';
import { add } from './math';

// `describe` crée un bloc pour regrouper des tests similaires
describe('add function', () => {

  // `it` définit un test unique. La première chaîne est la description du test.
  it('adds two numbers correctly', () => {
    // Exécutez la fonction avec des valeurs spécifiques
    const result = add(2, 3);

    // Utilisez `expect` pour vérifier le résultat attendu
    expect(result).toBe(5);
  });

});

Assertions

Les assertions sont le cœur des tests unitaires. Elles vérifient si le résultat obtenu correspond à ce qui est attendu. Vitest offre une variété d'assertions, telles que :

Tester les Composants Vue

Pour tester un composant Vue, vous pouvez utiliser @vue/test-utils en combinaison avec Vitest. Cela vous permet de monter un composant et d'interagir avec lui dans vos tests.

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

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(MyComponent);

    expect(wrapper.text()).toContain('Hello World');
  });
});

Pour passer des props au composant lors du test :

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

describe('WelcomeMessage', () => {
  it('affiche le bon message selon la prop', () => {
    const wrapper = mount(WelcomeMessage, {
      props: { name: 'Alice' }
    });

    expect(wrapper.text()).toContain('Alice');
  });
});

Consulter la documentation complète sur les wrapper de test-utils

mount vs shallowMount

Lors du test d'un composant, vous avez deux options de montage :

Stub = un faux composant qui remplace un vrai composant enfant dans un test.

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

// Teste le composant et tous ses enfants
const wrapper = mount(ParentComponent)

// Teste seulement ParentComponent, les enfants sont des stubs
const wrapper = shallowMount(ParentComponent)

Règle pratique : utilisez shallowMount par défaut pour les tests unitaires, si un enfant brise votre test, c'est que vous testez trop à la fois.

Attention : await obligatoire sur les interactions

Voir la doc sur l'asynchrone avec Vitest

Toujours utiliser await avant trigger(), sinon le DOM n'est pas encore mis à jour au moment de l'assertion :

// ❌ INCORRECT — le DOM n'est pas mis à jour
wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('1') // échoue !

// ✅ CORRECT
await wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('1') // passe

Vitest VS Vue test utils