vitest pour TypeScript : Guide complet

vitest est un framework de test unitaire moderne, rapide et puissant, conçu spécialement pour l'écosystème TypeScript et JavaScript. Il se présente comme une alternative directe à Jest, avec un accent sur la vitesse d'exécution et le support natif de Vite. Si vous utilisez Vite pour builder votre projet, vitest est le choix idéal, car il exploite le même plugin et la même configuration que votre outil de build principal.

Pourquoi utiliser vitest ? Premièrement, il est incroyablement rapide grâce à l'utilisation d'esbuild pour la transpilation et au support natif des modules ESM (ECMAScript Modules). Deuxièmement, il offre une API riche et compatible avec Jest, ce qui facilite la migration. Troisièmement, vitest intègre nativement le support de TypeScript, JSX, du mocking, de la couverture de code et des tests snapshot, sans nécessiter l'installation de paquets supplémentaires. Cela en fait un outil parfait aussi bien pour les petits projets que pour les applications d'entreprise complexes.

Sur ce site éducatif PythonLib, nous allons vous montrer comment utiliser vitest pour tester du code TypeScript. Vous apprendrez à installer la bibliothèque, à écrire vos premiers tests, à maîtriser les méthodes essentielles et à éviter les erreurs courantes. À la fin de cet article, vous serez capable d'utiliser vitest en toute confiance dans vos projets.

Installation

L'installation de vitest se fait via npm ou yarn. Pour un projet TypeScript, vous aurez également besoin d'installer TypeScript lui-même et les types pour Node.js (si vous testez du code serveur).

npm install -D vitest typescript @types/node

Si vous utilisez yarn :

yarn add -D vitest typescript @types/node

Après l'installation, ajoutez un script dans package.json :

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run"
  }
}

La commande vitest lance les tests en mode watch (relance automatique lors des modifications), tandis que vitest run exécute une seule fois tous les tests.

Démarrage rapide

Créez un fichier sum.ts avec une fonction simple :

// sum.ts
export function sum(a: number, b: number): number {
  return a + b;
}

Créez maintenant un fichier de test sum.test.ts :

// sum.test.ts
import { describe, it, expect } from 'vitest';
import { sum } from './sum';

describe('fonction sum', () => {
  it('doit additionner deux nombres correctement', () => {
    expect(sum(2, 3)).toBe(5);
  });

  it('doit gérer les nombres négatifs', () => {
    expect(sum(-1, -2)).toBe(-3);
  });
});

Lancez les tests :

npm run test

Vous verrez un affichage vert indiquant que les tests sont réussis. Félicitations, vous venez d'écrire votre premier test avec vitest !

Méthodes et fonctions essentielles

vitest propose une API riche pour écrire des tests. Voici 8 méthodes clés avec leur description et des exemples.

1. describe

Signature : describe(name: string, fn: () => void): void

Description : Regroupe des tests connexes dans un bloc. Améliore la lisibilité et permet d'appliquer des hooks (beforeEach, afterEach) à un groupe spécifique.

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

describe('Opérations mathématiques', () => {
  it('doit additionner', () => {
    expect(1 + 1).toBe(2);
  });

  it('doit soustraire', () => {
    expect(5 - 3).toBe(2);
  });
});

2. it / test

Signature : it(name: string, fn: () => void | Promise<void>, timeout?: number): void

Description : Définit un test individuel. Vous pouvez utiliser indifféremment it ou test — ce sont des synonymes.

import { it, expect } from 'vitest';

it('doit retourner true