Vitest

Un framework de test unitaire nouvelle génération, extrêmement rapide, conçu pour les projets modernes et propulsé par Vite.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que Vitest ?

Imaginez que vous construisez une voiture. Avant de la vendre, vous voulez vous assurer que chaque pièce (le moteur, les freins, les phares) fonctionne parfaitement. Vitest est l'outil qui permet aux développeurs de faire exactement cela pour leurs applications.

C'est un "framework de test" qui vérifie automatiquement que chaque petit morceau de code fait bien ce qu'il est censé faire. Sa particularité est sa vitesse fulgurante. Là où d'autres outils prennent plusieurs secondes pour donner un résultat, Vitest le fait quasi instantanément, ce qui rend les développeurs beaucoup plus productifs.

Pourquoi est-ce important ?

Confiance : Permet de modifier le code sans craindre de tout casser.
Rapidité : Accélère le développement en donnant un retour immédiat.
Qualité : Aide à construire des applications plus fiables et avec moins de bugs.

Pour les développeurs

Fonctionnement et Avantages

Vitest est un framework de test unitaire qui tire sa puissance de Vite. Il partage la même configuration, ce qui simplifie grandement le setup et assure une cohérence entre l'environnement de développement et de test.

Caractéristiques Clés

Performance : Utilise le HMR (Hot Module Replacement) de Vite pour une exécution quasi-instantanée des tests en mode "watch".
API Compatible Jest : Si vous connaissez Jest, vous serez immédiatement à l'aise avec Vitest.
ESM et TypeScript natifs : Supporte les modules ES et TypeScript sans configuration complexe.
"In-source testing" : Permet d'écrire des tests directement dans les fichiers sources, à côté du code qu'ils testent.
UI Mode : Une interface graphique pour visualiser et interagir avec vos tests.

Exemples Concrets

Test Unitaire de Base

Exemple de test simple

import { describe, it, expect } from 'vitest';

// Fonction à tester
function sum(a, b) {
  return a + b;
}

describe('sum function', () => {
  it('should return the correct sum of two positive numbers', () => {
    expect(sum(2, 3)).toBe(5);
  });

  it('should work with negative numbers', () => {
    expect(sum(-2, -3)).toBe(-5);
  });
});

Mocking d'une API

Vitest fournit une API de mocking puissante via l'objet `vi`.

Exemple de mocking avec vi

import { describe, it, expect, vi } from 'vitest';
  import axios from 'axios';
  
  // Fonction qui utilise une dépendance externe (axios)
  async function fetchUser(userId) {
    const response = await axios.get(`https://api.example.com/users/${userId}`);
    return response.data;
  }
  
  // On mock le module 'axios'
  vi.mock('axios');
  
  describe('fetchUser', () => {
    it('should fetch a user and return their name', async () => {
      const fakeUser = { id: 1, name: 'Damien' };
      
      // On configure le mock pour retourner une valeur spécifique
      axios.get.mockResolvedValue({ data: fakeUser });
  
      const user = await fetchUser(1);
  
      expect(user.name).toBe('Damien');
      // On vérifie que l'API a été appelée avec la bonne URL
      expect(axios.get).toHaveBeenCalledWith('https://api.example.com/users/1');
    });
  });

Test de Composant React

Il s'intègre parfaitement avec des bibliothèques comme React Testing Library.

Exemple de test de composant

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import Button from './Button'; // Un composant React simple

describe('Button component', () => {
  it('should render the button with the correct text', () => {
    render(<Button>Cliquez-moi</Button>);
    
    // On cherche un élément qui a le rôle "button" et le nom "Cliquez-moi"
    const buttonElement = screen.getByRole('button', { name: /cliquez-moi/i });
    
    expect(buttonElement).toBeInTheDocument();
  });
});

Vitest vs. Jest

Bien que l'API soit similaire, Vitest se distingue de Jest sur plusieurs points :

Caractéristique	Vitest	Jest
Performance (Watch mode)	Excellente (HMR)	Bonne, mais souvent plus lente
Configuration	Partagée avec Vite, simple	Séparée, peut être complexe
Support ESM	Natif et sans effort	Support expérimental, nécessite de la configuration
Environnement	Moderne (Vite)	Plus ancien (Babel, etc.)

Applications concrètes

Cas d'usage

Projets basés sur Vite

Le choix naturel pour toute application utilisant Vite (React, Vue, Svelte), pour une expérience de développement unifiée et performante.

Tests de composants UI

Tester des composants d'interface utilisateur de manière isolée pour vérifier leur rendu et leur comportement en réponse aux interactions.

Bibliothèques et Utilitaires

Valider la logique de bibliothèques JavaScript ou de fonctions utilitaires qui doivent être rapides et fiables.

Migration depuis Jest

Remplacer Jest dans des projets existants pour bénéficier d'un gain de performance significatif avec un effort de migration minimal grâce à l'API compatible.