Couverture de Code avec Vitest

La couverture de code est un indicateur précieux pour évaluer l’efficacité de vos tests. Elle mesure quelles parties de votre code sont exécutées lors des tests, vous aidant à identifier les zones non testées.

Configuration de la Couverture

Vitest propose deux fournisseurs de couverture de code:

• v8 (par défaut): utilise le moteur V8 de Node.js pour collecter les données de couverture
• istanbul: instrumentalise votre code pour un suivi précis de la couverture

Installation

Les modules de couverture sont optionnels et doivent être installés séparément:

# Pour v8 (par défaut)
npm i -D @vitest/coverage-v8

# Pour istanbul
npm i -D @vitest/coverage-istanbul

NOTE

Lorsque vous exécutez Vitest avec l’option de couverture activée pour la première fois, il vous proposera d’installer automatiquement le package correspondant.

Configuration de Base

Pour activer la couverture, vous pouvez utiliser le flag --coverage dans la ligne de commande:

vitest run --coverage

Ou configurez-la dans votre fichier de configuration:

vitest.config.js

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      provider: 'v8', // ou 'istanbul'
      reporter: ['text', 'json', 'html'],
    },
  },
})

Sélection du Fournisseur

Comparaison des Fournisseurs

Fournisseur	Avantages	Inconvénients
v8	Natif, plus rapide	Moins de formats de rapport
istanbul	Plus flexible, plus de formats	Légèrement plus lent

Pour choisir votre fournisseur de couverture:

vitest.config.js

export default defineConfig({
  test: {
    coverage: {
      provider: 'istanbul', // ou 'v8'
    },
  },
})

Configuration des Rapports

Par défaut, Vitest génère les rapports au format ['text', 'html', 'clover', 'json']. Vous pouvez personnaliser ces formats:

vitest.config.js

export default defineConfig({
  test: {
    coverage: {
      reporter: ['text', 'json', 'html'],
      // Personnalisation du répertoire de sortie
      reportsDirectory: './coverage',
    },
  },
})

Types de Rapports Disponibles

• text: affichage dans le terminal
• text-summary: résumé concis dans le terminal
• html: rapport HTML interactif
• lcov: format utilisé par de nombreux outils d’intégration continue
• clover: format XML compatible avec les outils Atlassian
• json: données brutes au format JSON
• json-summary: résumé agrégé au format JSON

Inclusion et Exclusion de Fichiers

Il est important de cibler précisément les fichiers à analyser pour obtenir des métriques pertinentes:

vitest.config.js

export default defineConfig({
  test: {
    coverage: {
      include: ['src/**/*.{js,ts}'],
      exclude: [
        'src/**/*.spec.{js,ts}',
        'src/**/*.test.{js,ts}',
        'src/**/*.d.ts',
      ],
    },
  },
})

NOTE

Il est recommandé de toujours définir coverage.include dans votre configuration. Cela aide Vitest à réduire le nombre de fichiers pris en compte lorsque l’option all est activée.

Seuils de Couverture

Vous pouvez définir des seuils minimaux de couverture pour maintenir la qualité du code:

vitest.config.js

export default defineConfig({
  test: {
    coverage: {
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 80,
        statements: 80,
      },
    },
  },
})

Si les seuils ne sont pas atteints, Vitest retournera un code d’erreur qui fera échouer le processus d’intégration continue.

Ignorer du Code dans la Couverture

Parfois, certaines parties de code ne nécessitent pas de tests ou sont difficiles à tester. Vous pouvez les exclure des rapports:

Avec v8

/* v8 ignore next */
function difficultToTest() {
  // Ce code sera ignoré dans les rapports
}

/* v8 ignore next 3 */
if (condition) {
  // 3 lignes ignorées
}

Avec Istanbul

/* istanbul ignore if */
if (condition) {
  // Ce bloc est ignoré
}

/* istanbul ignore next */
function nonTestableCode() {
  // Cette fonction est ignorée
}

NOTE

Avec TypeScript, les commentaires sont souvent supprimés lors de la transpilation. Pour Istanbul, ajoutez -- @preserve dans le commentaire pour le préserver:

/* istanbul ignore if -- @preserve */
if (condition) {
  // Ce bloc est ignoré
}

Rapports de Couverture Personnalisés

Pour des besoins avancés, vous pouvez implémenter votre propre rapporteur de couverture:

vitest.config.js

export default defineConfig({
  test: {
    coverage: {
      reporter: [
        ['@vitest/custom-coverage-reporter', { someOption: true }],
        '/chemin/absolu/vers/custom-reporter.cjs',
      ],
    },
  },
})

Intégration avec Vitest UI

Vitest UI affiche automatiquement les rapports de couverture lorsque:

1. L’option coverage.enabled est activée
2. Le rapporteur html est présent dans la liste des rapporteurs

Cela vous permet d’explorer visuellement la couverture directement dans l’interface utilisateur de Vitest.

Bonnes Pratiques pour la Couverture

1. Inclusion ciblée: Limitez les fichiers analysés à votre code source réel
2. Seuils progressifs: Commencez avec des seuils atteignables et augmentez-les progressivement
3. Ne visez pas 100%: Viser une couverture à 100% peut conduire à des tests de mauvaise qualité
4. Analysez les résultats: Utilisez les rapports pour identifier les parties critiques non testées
5. Utilisez .gitignore: Ajoutez le répertoire de rapports (généralement /coverage) à votre .gitignore

La couverture de code est un outil précieux, mais rappelez-vous qu’une couverture élevée n’est pas synonyme de tests de qualité. Concentrez-vous sur les cas d’utilisation importants et les chemins critiques de votre application.