<!DOCTYPE html>

Tests Unitaires de Composants Riot avec Vitest (Environnement Node)

Introduction

Les tests unitaires sont une partie essentielle du développement logiciel, permettant de s'assurer que chaque composant d'une application fonctionne correctement et de manière isolée. Dans le contexte de Riot, un framework JavaScript pour la création d'interfaces utilisateurs, les tests unitaires sont particulièrement importants pour garantir la qualité et la fiabilité des composants.

Vitest est un framework de test moderne, rapide et polyvalent, conçu pour être utilisé avec Node.js. Il est parfait pour tester des applications web, notamment celles utilisant Riot. Ce guide vous guidera dans la configuration et l'utilisation de Vitest pour effectuer des tests unitaires de composants Riot.

Configuration de l'Environnement

Avant de commencer, assurez-vous d'avoir Node.js et npm (ou yarn) installés sur votre système.

Création d'un nouveau projet

Créez un nouveau répertoire pour votre projet Riot et initialisez un projet npm:

  mkdir my-riot-project
  cd my-riot-project
  npm init -y

Installation des dépendances

Installez Riot et Vitest:

  npm install riot vitest

Configuration du fichier de configuration de Vitest

Créez un fichier vitest.config.js à la racine de votre projet avec le contenu suivant:

  // vitest.config.js
  import { defineConfig } from 'vitest';
  import riotPlugin from 'vitest-riot';

  export default defineConfig({
    plugins: [riotPlugin()],
    test: {
      environment: 'jsdom',
    },
  });

Ce fichier configure Vitest pour utiliser le plugin vitest-riot, qui permet à Vitest de comprendre et d'exécuter les tests de composants Riot. L'option environment: 'jsdom' configure Vitest pour utiliser un environnement de navigation simulé (jsdom) pour exécuter les tests. Cela permet de tester les composants Riot dans un environnement similaire à un navigateur web réel.

Écriture de Tests Unitaires

Création d'un composant Riot

Créez un nouveau composant Riot nommé my-component.riot dans un répertoire src:

  <!-- src/my-component.riot -->
  <my-component>
   <p>
    Hello, {name}!
   </p>
  </my-component>
  <script>
   export default {
      onMounted() {
        this.name = 'World';
      },
    };
  </script>

Création d'un fichier de test

Créez un fichier de test my-component.test.js dans un répertoire test:

  // test/my-component.test.js
  import { mount } from 'riot';
  import MyComponent from '../src/my-component.riot';

  describe('MyComponent', () =&gt; {
    it('should render the correct text', () =&gt; {
      const component = mount(MyComponent);
      expect(component.querySelector('p').textContent).toBe('Hello, World!');
    });
  });

Dans ce test, nous utilisons la fonction mount de Riot pour monter le composant dans un environnement de test. Nous vérifions ensuite que le contenu du paragraphe (<p>) correspond à la chaîne de caractères attendue "Hello, World!".

3. Exécution des tests

Exécutez les tests à l'aide de la commande suivante:

  npm run test

Vitest lancera les tests et affichera les résultats dans la console. Les tests réussis seront affichés en vert, tandis que les tests échoués seront affichés en rouge.

Conseils pour les Tests Unitaires de Composants Riot

Voici quelques conseils pour écrire des tests unitaires efficaces pour vos composants Riot:

1. Isoler les tests

Chaque test doit se concentrer sur un seul aspect de votre composant. Évitez de combiner plusieurs fonctionnalités dans un seul test.

2. Tester les différentes parties du composant

Assurez-vous de tester toutes les parties de votre composant, y compris ses attributs, ses méthodes, ses événements, etc.

3. Utiliser des assertions

Utilisez des assertions pour valider que votre composant se comporte comme prévu. Vitest propose un large éventail d'assertions, telles que expect, toBe, toEqual, etc.

4. Tester les cas limites

Testez les cas limites de votre composant, tels que les entrées nulles, les entrées non valides, les cas d'erreurs, etc.

5. Utiliser des mocks

Pour isoler les tests et éviter les dépendances externes, utilisez des mocks pour remplacer les fonctions ou les modules externes. Vitest prend en charge le mocking via des bibliothèques comme jest-mock.

6. Utiliser des outils de snapshot

Les outils de snapshot vous permettent de capturer l'état HTML ou du DOM du composant. Vous pouvez ensuite comparer ces snapshots à des versions précédentes afin de détecter rapidement les changements indésirables. Vitest prend en charge les snapshots via la commande npm run test:update.

Exemple Plus Complexe

Voici un exemple plus complexe d'un composant Riot et de ses tests:

   <!-- src/counter.riot -->
   <counter>
    <p>
     Count: {count}
    </p>
    <button onclick="{increment}">
     +
    </button>
    <button onclick="{decrement}">
     -
    </button>
   </counter>
   <script>
    export default {
      onMounted() {
        this.count = 0;
      },
      increment() {
        this.count++;
      },
      decrement() {
        this.count--;
      },
    };
   </script>

  // test/counter.test.js
  import { mount } from 'riot';
  import Counter from '../src/counter.riot';

  describe('Counter', () =&gt; {
    it('should render the initial count', () =&gt; {
      const component = mount(Counter);
      expect(component.querySelector('p').textContent).toBe('Count: 0');
    });

    it('should increment the count on click', () =&gt; {
      const component = mount(Counter);
      component.querySelector('button:first-of-type').click();
      expect(component.querySelector('p').textContent).toBe('Count: 1');
    });

    it('should decrement the count on click', () =&gt; {
      const component = mount(Counter);
      component.querySelector('button:last-of-type').click();
      expect(component.querySelector('p').textContent).toBe('Count: -1');
    });
  });

Ce test couvre les cas suivants:

Le composant affiche le compteur initial à 0.
Cliquer sur le bouton "+" incrémente le compteur.
Cliquer sur le bouton "-" décrémente le compteur.

Conclusion

Les tests unitaires sont essentiels pour garantir la qualité et la fiabilité des composants Riot. Vitest, avec le plugin vitest-riot, fournit un environnement de test performant et convivial pour effectuer des tests unitaires de composants Riot dans un environnement Node.js.

En suivant les conseils et les exemples fournis dans ce guide, vous pouvez écrire des tests unitaires efficaces pour vos composants Riot et ainsi améliorer la qualité globale de votre application web.

🇫🇷 Test Unitaire de Composant Riot avec Vitest (Environnement Node)