BaliseTonSite

Tests Unitaires Automatisés

Génère des suites de tests Vitest / Jest complètes pour tes composants et fonctions utilitaires, sans écrire une seule assertion manuellement.

6.1L'atelier de contrôle qualité

Un test unitaire pose une seule question : "Est-ce que cette pièce fait exactement ce qu'elle est censée faire ?" Pas plus. Chaque fonction, chaque composant a sa batterie de tests.

Le problème : écrire des tests est fastidieux. Penser à tous les cas limites, structurer les assertions, mocker les dépendances… L'IA est exceptionnellement douée pour ça.

6.2Générer des tests pour une fonction utilitaire

Prompt : Tests Vitest pour une fonctionmarkdown
Tu es un dev TypeScript senior expert en tests unitaires avec Vitest.

Voici la fonction à tester :
[COLLE TA FONCTION]

Génère une suite de tests Vitest complète qui couvre :
1. Le cas nominal (entrée valide, sortie attendue)
2. Tous les cas limites que tu peux identifier
3. Les entrées invalides / erreurs attendues
4. Les valeurs aux frontières (0, -1, tableau vide, string vide, null, undefined)

Format : describe/it/expect, noms de tests en français, assertions précises.
Pas de mocking inutile - teste le comportement réel.

Exemple sur une fonction utilitaire concrète :

lib/utils/format-date.ts - La fonction à testertypescript
export function formatDate(isoDate: string, locale = 'fr-FR'): string {
    const date = new Date(isoDate);
    if (isNaN(date.getTime())) throw new Error('Date invalide');
    return date.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' });
}
Résultat généré : format-date.test.tstypescript
import { describe, it, expect } from 'vitest';
import { formatDate } from '@/lib/utils/format-date';

describe('formatDate', () => {
    describe('cas nominaux', () => {
        it('formate une date ISO en français par défaut', () => {
            expect(formatDate('2026-02-20T10:00:00')).toBe('20 février 2026');
        });

        it('accepte un locale alternatif', () => {
            expect(formatDate('2026-02-20T10:00:00', 'en-US')).toBe('February 20, 2026');
        });

        it('gère les dates en fin de mois', () => {
            expect(formatDate('2026-02-28T00:00:00')).toBe('28 février 2026');
        });
    });

    describe('cas limites', () => {
        it('gère le 1er janvier (début d'année)', () => {
            expect(formatDate('2026-01-01T00:00:00')).toBe('1 janvier 2026');
        });

        it('gère le 31 décembre (fin d'année)', () => {
            expect(formatDate('2026-12-31T23:59:59')).toBe('31 décembre 2026');
        });
    });

    describe('cas d'erreur', () => {
        it('lève une erreur pour une date invalide', () => {
            expect(() => formatDate('pas-une-date')).toThrow('Date invalide');
        });

        it('lève une erreur pour une string vide', () => {
            expect(() => formatDate('')).toThrow('Date invalide');
        });
    });
});

6.3Générer des tests pour un composant React

Prompt : Tests Vitest + Testing Library pour composantmarkdown
Tu es expert en tests React avec Vitest + @testing-library/react.

Voici le composant à tester :
[COLLE TON COMPOSANT]

Génère des tests qui couvrent :
1. Le rendu par défaut (snapshot ou assertions sur le DOM)
2. Chaque prop et son effet visible
3. Les interactions utilisateur (clic, saisie)
4. Les états : loading, error, empty, populated
5. L'accessibilité : présence des rôles ARIA, labels

Utilise : render, screen, userEvent, waitFor, vi.fn() pour les callbacks.
Pas de test d'implémentation interne - teste ce que l'utilisateur voit.
Résultat généré : ArticleCard.test.tsxtypescript
import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { ArticleCard } from '@/components/ArticleCard';
import { mockWpPost } from '@/tests/fixtures/wp-post';

describe('ArticleCard', () => {
    it('affiche le titre de l'article', () => {
        render(<ArticleCard post={mockWpPost} />);
        expect(screen.getByRole('heading', { name: mockWpPost.title.rendered })).toBeInTheDocument();
    });

    it('affiche l'extrait tronqué', () => {
        render(<ArticleCard post={mockWpPost} />);
        expect(screen.getByText(/extrait/i)).toBeInTheDocument();
    });

    it('le titre est un lien vers le bon slug', () => {
        render(<ArticleCard post={mockWpPost} />);
        const link = screen.getByRole('link', { name: /lire/i });
        expect(link).toHaveAttribute('href', `/${mockWpPost.slug}`);
    });

    it('n'affiche pas d'image si aucune image à la une', () => {
        const postWithoutImage = { ...mockWpPost, _embedded: undefined };
        render(<ArticleCard post={postWithoutImage} />);
        expect(screen.queryByRole('img')).not.toBeInTheDocument();
    });

    it('le lien Lire a un aria-label explicite', () => {
        render(<ArticleCard post={mockWpPost} />);
        expect(screen.getByRole('link', { name: `Lire ${mockWpPost.title.rendered}` })).toBeInTheDocument();
    });
});

Setup Vitest en 2 minutes

Installationbash
npm install -D vitest @vitejs/plugin-react @testing-library/react @testing-library/jest-dom jsdom
vitest.config.tstypescript
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
    plugins: [react()],
    test: {
        environment: 'jsdom',
        setupFiles: ['./tests/setup.ts'],
        globals: true,
    },
    resolve: {
        alias: { '@': path.resolve(__dirname, './') },
    },
});

Verifie tes acquis

5 questions pour valider ce chapitre

1. Comment demander à l'IA de générer des tests unitaires ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure
Déjà membre ?Connecte-toi