Pokrycie kodu

Vitest obsługuje natywne pokrycie kodu za pomocą v8 oraz pokrycie kodu instrumentowane za pomocą istanbul.

Dostawcy pokrycia

TIP

Od Vitest v0.22.0

Zarówno v8, jak i istanbul są opcjonalnymi dostawcami pokrycia kodu. Domyślnie używany jest v8.

Możesz wybrać dostawcę pokrycia kodu, ustawiając opcję test.coverage.provider na v8 lub istanbul:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

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

Po uruchomieniu Vitest wyświetli monit o zainstalowanie odpowiedniego pakietu.

Alternatywnie, możesz zainstalować je ręcznie:

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

# Dla Istanbul
npm i -D @vitest/coverage-istanbul

Konfiguracja pokrycia kodu

TIP

Zaleca się, aby zawsze definiować coverage.include w pliku konfiguracyjnym. Pomaga to Vitest w zmniejszeniu liczby plików wybieranych przez coverage.all.

Aby uruchomić testy z włączonym pokryciem kodu, możesz użyć flagi --coverage w CLI. Domyślnie używane będą reportery ['text', 'html', 'clover', 'json'].

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

Aby dostosować konfigurację, ustaw opcje w sekcji test.coverage w pliku konfiguracyjnym:

// vitest.config.ts
import { defineConfig } from 'vitest/config';

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

Niestandardowy reporter pokrycia kodu

Możesz używać niestandardowych reporterów pokrycia kodu, przekazując nazwę pakietu lub ścieżkę absolutną w test.coverage.reporter:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    coverage: {
      reporter: [
        // Określ reportera za pomocą nazwy pakietu NPM
        ['@vitest/custom-coverage-reporter', { someOption: true }],

        // Określ reportera za pomocą ścieżki lokalnej
        '/absolute/path/to/custom-reporter.cjs',
      ],
    },
  },
});

Niestandardowe reportery są ładowane przez Istanbul i muszą być zgodne z jego interfejsem reportera. Zobacz implementację wbudowanych reporterów jako odniesienie.

// custom-reporter.cjs
const { ReportBase } = require('istanbul-lib-report');

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

    // Opcje przekazane z konfiguracji są tutaj dostępne
    this.file = opts.file;
  }

  onStart(root, context) {
    this.contentWriter = context.writer.writeFile(this.file);
    this.contentWriter.println('Start of custom coverage report');
  }

  onEnd() {
    this.contentWriter.println('End of custom coverage report');
    this.contentWriter.close();
  }
};

Własny dostawca pokrycia kodu

Możesz również użyć własnego dostawcy pokrycia kodu, ustawiając test.coverage.provider na 'custom':

// vitest.config.ts
import { defineConfig } from 'vitest/config';

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

Własny dostawca wymaga opcji customProviderModule, która określa nazwę modułu lub ścieżkę do modułu, z którego ma zostać załadowany CoverageProviderModule. Moduł ten musi eksportować obiekt implementujący interfejs CoverageProviderModule jako eksport domyślny:

// my-custom-coverage-provider.ts
import type {
  CoverageProvider,
  CoverageProviderModule,
  ResolvedCoverageOptions,
  Vitest,
} from 'vitest';

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

  // Implementacja reszty CoverageProviderModule ...
};

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

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

  // Implementacja reszty CoverageProvider ...
}

export default CustomCoverageProviderModule;

Zapoznaj się z definicją typu, aby uzyskać więcej szczegółów.

Zmiana domyślnej lokalizacji folderu pokrycia kodu

Podczas generowania raportu pokrycia kodu, folder coverage jest tworzony w głównym katalogu projektu. Aby zmienić jego lokalizację, użyj właściwości test.coverage.reportsDirectory w pliku vite.config.js.

import { defineConfig } from 'vite';

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

Ignorowanie kodu

Oba narzędzia do pokrycia kodu oferują własne mechanizmy ignorowania kodu w raportach pokrycia:

• v8
• ìstanbul

Podczas korzystania z TypeScript, kod źródłowy jest transpilowany za pomocą esbuild, który domyślnie usuwa wszystkie komentarze z kodu źródłowego (esbuild#516). Wyjątkiem są komentarze uznawane za komentarze prawne, które są zachowywane.

W przypadku istanbul można dodać słowo kluczowe @preserve w instrukcji ignorowania. Uwaga: te instrukcje ignorowania mogą pozostać w finalnej wersji produkcyjnej.

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

W przypadku v8 nie powoduje to żadnych problemów. Możesz używać komentarzy v8 ignore z Typescriptem jak zwykle:

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

Inne opcje

Wszystkie dostępne opcje konfiguracji pokrycia kodu znajdziesz w Dokumentacji konfiguracji pokrycia kodu.

Vitest UI

Od Vitest 0.31.0 możesz przeglądać raport pokrycia kodu w Vitest UI.

Raport pokrycia kodu w Vitest UI zostanie włączony, jeśli jawnie włączysz pokrycie kodu i użyjesz reportera HTML. W przeciwnym razie raport nie będzie dostępny.

• Włącz coverage.enabled=true w konfiguracji lub uruchom Vitest z flagą --coverage.enabled=true
• Dodaj html do listy coverage.reporter. Możesz również włączyć opcję subdir, aby umieścić raport pokrycia kodu w podkatalogu