Tests unitaires avec Vitest : un cadre de tests de nouvelle génération

Pourquoi choisir Vitest ?

Vitest est conçu dans un esprit de développement moderne. Voici pourquoi il se démarque :

Vitesse

Vitest s'appuie sur Vite comme base, en utilisant son remplacement de module à chaud (HMR) ultra-rapide et son esbuild pour le regroupement et la transpilation. Cela donne :

• Mode montre intelligente et instantanée : les tests sont réexécutés uniquement pour les fichiers concernés, ce qui rend la boucle de rétroaction instantanée.
• Support ESM prêt à l'emploi : les projets modernes bénéficient d'un support direct pour les modules ES sans hacks.

Dans les tests de performances, Vitest dépasse systématiquement Jest d'une marge significative en raison de son utilisation du pipeline de build optimisé de Vite.

Framework	Time to run 500 tests
Jest	~8 seconds
Vitest	~3 seconds
Mocha	~6 seconds

Remarque : Ces références peuvent varier en fonction de la complexité du projet et des spécifications du système.

Compatibilité

Vitest est compatible avec Jest, ce qui signifie que vous pouvez réutiliser une grande partie de votre suite de tests existante avec un minimum de modifications. Il prend également en charge des outils populaires tels que TypeScript, JSX et ESM prêts à l'emploi.

Expérience du développeur

• Intégré au HMR de Vite pour une itération de test rapide.
• API et configuration simples.
• Un écosystème riche et un soutien communautaire croissant.

---

Configuration de Vitest

Plongeons dans la configuration de Vitest dans un projet TypeScript. Nous allons le démontrer à l'aide d'un projet React, mais les étapes sont similaires pour les projets Vue 3 ou Node.js.

Installation

1. Assurez-vous que Node.js et npm/yarn/pnpm sont installés.
2. Installez Vitest et ses dépendances homologues :

npm install --save-dev vitest

Pour les projets utilisant React, vous aurez également besoin de la bibliothèque de tests React :

npm install --save-dev @testing-library/react @testing-library/jest-dom

Configuration

Créez ou mettez à jour votre vite.config.ts pour activer Vitest :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

Ajout de fichiers d'installation

Les fichiers de configuration sont utilisés pour configurer l'environnement de test. Créez un fichier test/setup.ts :
importer '@testing-library/jest-dom';

Ajout de scripts

Mettez à jour votre package.json pour inclure un script de test :

{
  "scripts": {
    "test": "vitest"
  }
}

---

Écrire des tests unitaires avec Vitest

Vitest fournit une API de type Jest qui simplifie l'écriture de tests. Voici un exemple simple :

Exemple : composant React

Imaginez que vous ayez un composant React :

// src/components/Greeting.tsx
import React from 'react';

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Tests d'écriture

Créez un fichier de test pour le composant :

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<Greeting name="Vitest" />);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

Exécution de tests

Exécutez les tests en utilisant :
npm exécuter le test

Vous verrez un résultat similaire à celui-ci :
✓ Le composant de salutation restitue le message d'accueil correct

---

Fonctionnalités avancées

Railleur

Vitest prend directement en charge les modules et fonctions moqueurs :

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

Test d'instantané

Les tests d'instantanés sont aussi simples que :

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<Greeting name="Vitest" />);
  expect(container).toMatchSnapshot();
});

Tests de performances

Utilisez les options CLI de Vitest pour mesurer les performances :
vitest --run --coverage

---

Conclusion

Vitest est un choix incontournable pour les tests modernes, offrant vitesse, simplicité et fonctionnalités riches optimisées par Vite. Qu'il s'agisse d'une migration depuis Jest ou d'un nouveau départ, Vitest offre une excellente expérience de développement et garantit que vos tests s'exécutent aussi rapidement que votre code.

Essayez Vitest dans votre prochain projet et découvrez la différence !

Références

Site Vitest
Vite

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!