Tests automatisés

Le bouclier de ta CI. Attrape les bugs avant qu'ils n'arrivent en production.

Pourquoi tester dans la CI

Automatique : les tests tournent à chaque push, pas besoin d'y penser
Filet de sécurité : si tu casses quelque chose, la CI te prévient
Documentation vivante : les tests décrivent ce que le code fait
Confiance : tu peux refactorer sans avoir peur

Setup Vitest

Bashbash

# Installer Vitest
npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

TypeScripttypescript

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import path from 'path'

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

TypeScripttypescript

// vitest.setup.ts
import '@testing-library/jest-dom'

Ã‰crire un test basique

TypeScripttypescript

// lib/utils.test.ts
import { describe, it, expect } from 'vitest'

// Fonction à tester
function formatPrice(cents: number): string {
  return (cents / 100).toFixed(2) + ' EUR'
}

describe('formatPrice', () => {
  it('formate les centimes en euros', () => {
    expect(formatPrice(12900)).toBe('129.00 EUR')
  })

  it('gère le prix zéro', () => {
    expect(formatPrice(0)).toBe('0.00 EUR')
  })

  it('gère les centimes', () => {
    expect(formatPrice(199)).toBe('1.99 EUR')
  })
})

Tester un composant React

TSXtsx

// components/ui/badge.test.tsx
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'

function Badge({ label }: { label: string }) {
  return <span className="badge">{label}</span>
}

describe('Badge', () => {
  it('affiche le label', () => {
    render(<Badge label="Gratuit" />)
    expect(screen.getByText('Gratuit')).toBeInTheDocument()
  })
})

Ajouter les tests au pipeline

Bashbash

# Dans package.json, ajouter le script :
# "test": "vitest run"
# "test:watch": "vitest"   (pour le dev local)

# Dans le workflow CI :
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci
      - run: npm run lint
      - run: npx tsc --noEmit
      - run: npm run test          # Ajouter cette ligne
      - run: npm run build

Les tests que l'IA peut générer

Bashbash

# Prompt pour générer des tests :
# "Voici ma fonction TypeScript :
# [colle la fonction]
#
# Génère une suite de tests Vitest complète qui couvre :
# 1. Le cas nominal (happy path)
# 2. Les cas limites (zéro, null, undefined, tableau vide)
# 3. Les cas d'erreur (mauvais type, valeur invalide)
#
# Utilise describe/it/expect. Pas de mocks sauf si nécessaire."

Couverture de code

Bashbash

# Ajouter la couverture de code
npm install -D @vitest/coverage-v8

# Lancer avec couverture
npx vitest run --coverage

# Résultat : pourcentage de lignes/fonctions/branches testées
# Objectif raisonnable : 60% pour commencer, 80% pour un projet mature

# Dans le workflow CI (optionnel) :
- run: npx vitest run --coverage
  env:
    CI: true

Ce que tu as débloqué

Setup Vitest pour un projet Next.js/React
Ã‰crire des tests unitaires (fonctions + composants)
Intégrer les tests dans le pipeline CI
Utiliser l'IA pour générer des suites de tests
Mesurer la couverture de code

Verifie tes acquis

5 questions pour valider ce chapitre

1. Quel framework de test est recommandé pour un projet Vite/Next.js ?

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