Typentests

Vitest ermöglicht es Ihnen, Tests für Ihre Typen zu schreiben, indem Sie die Syntax expectTypeOf oder assertType verwenden. Standardmäßig werden alle Tests in *.test-d.ts-Dateien als Typentests betrachtet, aber Sie können dies mit der Konfigurationsoption typecheck.include ändern.

Im Hintergrund ruft Vitest tsc oder vue-tsc auf, abhängig von Ihrer Konfiguration, und analysiert die Ergebnisse. Vitest gibt auch Typfehler in Ihrem Quellcode aus, falls welche gefunden werden. Sie können dies mit der Konfigurationsoption typecheck.ignoreSourceErrors deaktivieren.

Beachten Sie, dass Vitest diese Dateien weder ausführt noch kompiliert. Sie werden lediglich statisch vom Compiler analysiert, weshalb Sie keine dynamischen Anweisungen verwenden können. Das bedeutet, dass Sie keine dynamischen Testnamen sowie die APIs test.each, test.runIf, test.skipIf und test.concurrent verwenden können. Sie können aber andere APIs wie test, describe, .only, .skip und .todo verwenden.

Die Verwendung von CLI-Flags wie --allowOnly und -t wird für die Typüberprüfung ebenfalls unterstützt.

import { assertType, expectTypeOf } from 'vitest';
import { mount } from './mount.js';

test('Meine Typen funktionieren korrekt', () => {
  expectTypeOf(mount).toBeFunction();
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>();

  // @ts-expect-error name ist ein String
  assertType(mount({ name: 42 }));
});

Jeder Typfehler, der in einer Testdatei ausgelöst wird, wird als Testfehler behandelt, sodass Sie jeden gewünschten Typ-Trick verwenden können, um die Typen Ihres Projekts zu testen.

Eine Liste möglicher Matcher finden Sie im API-Abschnitt.

Fehler lesen

Wenn Sie die expectTypeOf-API verwenden, könnten Sie möglicherweise schwer lesbare oder unerwartete Fehlermeldungen bemerken:

expectTypeOf(1).toEqualTypeOf<string>();
//             ^^^^^^^^^^^^^^^^^^^^^^
// index-c3943160.d.ts(90, 20): Arguments for the rest parameter 'MISMATCH' were not provided.

Dies liegt daran, wie expect-type mit Typfehlern umgeht.

Leider stellt TypeScript keine Typmetadaten ohne Patching bereit, sodass wir an dieser Stelle keine nützlichen Fehlermeldungen bereitstellen können. Es gibt jedoch Bestrebungen im TypeScript-Projekt, um dies zu beheben. Wenn Sie bessere Fehlermeldungen wünschen, bitten Sie das TypeScript-Team, sich den erwähnten PR anzusehen.

Wenn Sie Schwierigkeiten haben, mit der expectTypeOf-API zu arbeiten und Fehler zu finden, können Sie jederzeit die einfachere assertType-API verwenden:

const answer = 42;

assertType<number>(answer);
// @ts-expect-error answer ist kein String
assertType<string>(answer);

TIP

Wenn Sie die @ts-expect-error-Syntax verwenden, sollten Sie sicherstellen, dass Sie keinen Tippfehler gemacht haben. Sie können dies tun, indem Sie Ihre Typdateien in die Konfigurationsoption test.include einfügen, sodass Vitest diese Tests auch tatsächlich ausführt und mit einem ReferenceError fehlschlägt.

Dies wird erfolgreich sein, da ein Fehler erwartet wird, aber das Wort "answer" hat einen Tippfehler, wodurch es zu einem falsch-positiven Fehler kommt:

// @ts-expect-error answer ist kein String
assertType<string>(answr); //

Typüberprüfung durchführen

Fügen Sie diesen Befehl zu Ihrem scripts-Abschnitt in package.json hinzu:

{
  "scripts": {
    "typecheck": "vitest typecheck"
  }
}

Jetzt können Sie die Typüberprüfung ausführen:

# npm
npm run typecheck

# yarn
yarn typecheck

# pnpm
pnpm run typecheck

Vitest verwendet tsc --noEmit oder vue-tsc --noEmit, abhängig von Ihrer Konfiguration. Daher können Sie diese Skripte aus Ihrer Build-Pipeline entfernen.