Cours 14 - 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."

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');
  });
});

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

Vitest VS Vue test utils