Couverture

Vitest prend en charge la couverture de code native via v8 et la couverture de code instrumentée via istanbul.

Fournisseurs de Couverture

Les supports pour v8 et istanbul sont optionnels. Par défaut, v8 sera utilisé.

Vous pouvez sélectionner l’outil de couverture en définissant test.coverage.provider sur v8 ou istanbul :

import { defineConfig } from 'vitest/config'

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

Lorsque vous démarrez le processus Vitest, il vous invitera à installer automatiquement le paquet de support correspondant.

Ou si vous préférez les installer manuellement :

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

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

Configuration de la Couverture

Pour tester avec la couverture activée, vous pouvez passer le drapeau --coverage dans la CLI. Par défaut, le reporter ['text', 'html', 'clover', 'json'] sera utilisé.

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

Pour le configurer, définissez les options test.coverage dans votre fichier de configuration :

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      reporter: ['text', 'json', 'html'],
    },
  },
})

Reporter de Couverture Personnalisé

Vous pouvez utiliser des reporteurs de couverture personnalisés en passant soit le nom du paquet, soit le chemin absolu dans test.coverage.reporter :

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      reporter: [
        // Spécifiez le reporter en utilisant le nom du paquet NPM
        ['@vitest/custom-coverage-reporter', { someOption: true }],

        // Spécifiez le reporter en utilisant le chemin local
        '/absolute/path/to/custom-reporter.cjs',
      ],
    },
  },
})

Les reporteurs personnalisés sont chargés par Istanbul et doivent correspondre à son interface de reporter. Voir l’implémentation des reporteurs intégrés pour référence.

const { ReportBase } = require('istanbul-lib-report')

module.exports = class CustomReporter extends ReportBase {
  constructor(opts) {
    super()

    // Les options passées depuis la configuration sont disponibles ici
    this.file = opts.file
  }

  onStart(root, context) {
    this.contentWriter = context.writer.writeFile(this.file)
    this.contentWriter.println('Début du rapport de couverture personnalisé')
  }

  onEnd() {
    this.contentWriter.println('Fin du rapport de couverture personnalisé')
    this.contentWriter.close()
  }
}

Fournisseur de Couverture Personnalisé

Il est également possible de fournir votre fournisseur de couverture personnalisé en passant 'custom' dans test.coverage.provider :

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    coverage: {
      provider: 'custom',
      customProviderModule: 'my-custom-coverage-provider'
    },
  },
})

Les fournisseurs personnalisés nécessitent une option customProviderModule qui est un nom de module ou un chemin d’où charger le CoverageProviderModule. Il doit exporter un objet qui implémente CoverageProviderModule comme exportation par défaut :

import type {
  CoverageProvider,
  CoverageProviderModule,
  ResolvedCoverageOptions,
  Vitest
} from 'vitest'

const CustomCoverageProviderModule: CoverageProviderModule = {
  getProvider(): CoverageProvider {
    return new CustomCoverageProvider()
  },

  // Implémente le reste du CoverageProviderModule ...
}

class CustomCoverageProvider implements CoverageProvider {
  name = 'custom-coverage-provider'
  options!: ResolvedCoverageOptions

  initialize(ctx: Vitest) {
    this.options = ctx.config.coverage
  }

  // Implémente le reste du CoverageProvider ...
}

export default CustomCoverageProviderModule

Veuillez vous référer à la définition de type pour plus de détails.

Changer l’Emplacement du Dossier de Couverture par Défaut

Lors de l’exécution d’un rapport de couverture, un dossier coverage est créé dans le répertoire racine de votre projet. Si vous souhaitez le déplacer vers un autre répertoire, utilisez la propriété test.coverage.reportsDirectory dans le fichier vite.config.js.

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    coverage: {
      reportsDirectory: './tests/unit/coverage'
    }
  }
})

Ignorer le Code

Les deux fournisseurs de couverture ont leurs propres méthodes pour ignorer le code des rapports de couverture :

Lors de l’utilisation de TypeScript, les codes sources sont transpiled en utilisant esbuild, qui supprime tous les commentaires des codes sources (esbuild#516). Les commentaires considérés comme commentaires légaux sont préservés.

Pour le fournisseur istanbul, vous pouvez inclure un mot-clé @preserve dans l’indice d’ignorance. Attention, ces indices d’ignorance peuvent maintenant être inclus dans la version finale de production également.

/* istanbul ignore if */
/* istanbul ignore if -- @preserve */
if (condition) {

Pour v8, cela ne pose pas de problèmes. Vous pouvez utiliser des commentaires v8 ignore avec TypeScript comme d’habitude :

/* v8 ignore next 3 */
if (condition) {

Autres Options

Pour voir toutes les options configurables pour la couverture, consultez la Référence de Configuration de la Couverture.

UI de Vitest

Vous pouvez vérifier votre rapport de couverture dans Vitest UI.

Vitest UI activera le rapport de couverture lorsqu’il est explicitement activé et que le reporter de couverture HTML est présent, sinon il ne sera pas disponible :

activez coverage.enabled=true dans votre configuration ou exécutez Vitest avec le drapeau --coverage.enabled=true
ajoutez html à la liste coverage.reporter : vous pouvez également activer l’option subdir pour mettre le rapport de couverture dans un sous-répertoire

activation de la couverture HTML dans Vitest UI