Testen
Visual Studio Code bietet eine reichhaltige Sammlung von Funktionen zum Testen Ihres Codes. Sie können Tests automatisch in Ihrem Projekt erkennen, Ihre Tests ausführen und debuggen und Ergebnisse zur Testabdeckung erhalten. GitHub Copilot in VS Code kann Sie beim Einrichten des Test-Frameworks für Ihr Projekt unterstützen und Ihnen beim Generieren von Testcode und Beheben fehlerhafter Tests helfen.
In diesem Artikel erfahren Sie, wie Sie mit dem Testen in VS Code beginnen, beliebte Test-Erweiterungen finden und die Testfunktionen erkunden. Sie erfahren auch, wie Copilot in VS Code Ihnen helfen kann, Tests schneller zu schreiben, und wie es Sie bei der Behebung fehlerhafter Tests unterstützen kann.
Wenn Sie noch kein Copilot-Abonnement haben, nutzen Sie Copilot kostenlos, indem Sie sich für den Copilot-Gratisplan anmelden. Sie erhalten ein monatliches Limit für Vervollständigungen und Chat-Interaktionen.
Tests in VS Code
Die Testunterstützung in VS Code ist sprachspezifisch und hängt von den Test-Erweiterungen ab, die Sie installiert haben. Sprach- oder eigenständige Erweiterungen können die Testfunktionen für eine bestimmte Sprache oder ein bestimmtes Test-Framework implementieren.
VS Code verfügt über die folgenden Funktionen zum Testen Ihres Codes
-
Unterstützung mehrerer Test-Frameworks: Sprach-Erweiterungen und eigenständige Test-Erweiterungen bieten Unterstützung für verschiedene Sprachen und Test-Runner, wie z. B. Jest, Mocha, Pytest, JUnit und mehr.
-
Zentralisierte Testverwaltung: Der Test-Explorer bietet einen zentralen Ort zur Verwaltung und Ausführung von Tests in Ihrem Projekt. Der Test-Explorer erkennt möglicherweise automatisch die Tests in Ihrem Projekt, abhängig von der Test-Erweiterung.
-
Integrierte Testergebnisse: Zeigen Sie den Teststatus direkt im Editor neben dem Testcode an oder sehen Sie alle Tests im Test-Explorer. Detaillierte Testergebnisse sind im Bereich Testergebnisse verfügbar.
-
Debugging: Debuggen Sie Ihre Tests, um Testfehler zu diagnostizieren. Nutzen Sie die reichhaltige Debugging-Unterstützung in VS Code, wie Breakpoints, Überwachungsvariablen und mehr.
-
Testabdeckung: Führen Sie Tests mit Abdeckung aus, um zu sehen, wie viel Ihres Codes von Ihren Tests abgedeckt wird.
-
KI-gestützte Tests: Nutzen Sie GitHub Copilot in VS Code, um Sie beim Einrichten Ihres Test-Frameworks, beim Generieren von Testcode und beim Beheben fehlerhafter Tests zu unterstützen.
-
Task-Integration: Erleichtern Sie Ihre Testarbeit, indem Sie Aufgaben zum Ausführen Ihrer Tests erstellen. Sie können Ihre Tests auch im Hintergrund ausführen, wenn Sie Ihren Code ändern.
Erste Schritte mit Tests in VS Code
Um mit dem Testen in VS Code zu beginnen, gehen Sie wie folgt vor
-
Öffnen Sie die Erweiterungsansicht und installieren Sie eine Test-Erweiterung für Ihr Projekt. Filtern Sie die Erweiterungen nach der Kategorie Testing (@category:"testing").
-
Wählen Sie das Becherglas-Symbol () in der Aktivitätsleiste, um den Test-Explorer zu öffnen und die Tests in Ihrem Projekt zu erkennen.
-
Führen Sie Ihre Tests aus dem Test-Explorer oder direkt aus dem Editor aus und debuggen Sie sie.
Erweiterungen für Tests
Sie können Erweiterungen, die Tests unterstützen, im Visual Studio Marketplace finden. Sie können auch zur Erweiterungsansicht gehen (⇧⌘X (Windows, Linux Ctrl+Shift+X)) und nach der Kategorie Testing filtern.
Copilot kann Sie beim Einrichten eines Test-Frameworks und beim Vorschlagen relevanter Test-Erweiterungen unterstützen. Öffnen Sie die Chat-Ansicht (⌃⌘I (Windows, Linux Ctrl+Alt+I)), geben Sie den Befehl /setupTests ein, und Copilot führt Sie durch den Prozess der Konfiguration Ihres Projekts.
Automatische Test-Erkennung in der Testansicht
Die Testansicht bietet einen zentralen Ort zur Verwaltung und Ausführung Ihrer Tests. Sie können zur Testansicht gelangen, indem Sie das Becherglas-Symbol () in der Aktivitätsleiste auswählen. Sie können auch den Befehl Testing: Focus on Test Explorer View im Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) verwenden.
Wenn Sie ein Projekt mit Tests haben, erkennt die Test-Explorer-Ansicht die Tests in Ihrem Arbeitsbereich und listet sie auf. Standardmäßig werden die erkannten Tests in einer Baumansicht im Test-Explorer angezeigt. Die Baumansicht entspricht der hierarchischen Struktur Ihrer Tests, wodurch es einfach wird, Ihre Tests zu navigieren und auszuführen.

Sie können Tests vom Test-Explorer aus ausführen, indem Sie auf die Wiedergabetaste klicken. Erfahren Sie mehr über das Ausführen und Debuggen von Tests im Abschnitt Tests ausführen und debuggen.
Navigieren Sie zum Testcode, indem Sie im Test-Explorer auf den Test doppelklicken. Wenn Sie einen fehlgeschlagenen Test auswählen, öffnet der Editor die Testdatei, hebt den fehlgeschlagenen Test hervor und zeigt die Fehlermeldung an.
Wenn Sie viele Tests haben, können Sie die Filteroptionen verwenden, um die gewünschten Tests schnell zu finden. Sie können die Schaltfläche Filter verwenden, um Tests nach Status zu filtern oder nur Tests für die aktuelle Datei anzuzeigen. Sie können auch das Suchfeld verwenden, um nach bestimmten Tests anhand des Namens zu suchen, oder das Symbol @ verwenden, um nach Status zu suchen.

Im Menü Weitere Aktionen können Sie auf weitere Funktionen zugreifen, wie z. B. Sortier- und Anzeigeoptionen.
Wenn Sie neue Tests hinzufügen oder Ihre Tests ändern, verwenden Sie die Schaltfläche Tests aktualisieren, um die Liste der Tests im Test-Explorer zu aktualisieren. Sie können auch den Befehl Test Explorer: Reload tests in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) verwenden.
Je nach Test-Erweiterung müssen Sie möglicherweise zuerst das Test-Framework oder den Test-Runner konfigurieren, um die Tests in Ihrem Projekt zu erkennen. Weitere Informationen finden Sie in der Dokumentation der Test-Erweiterung. Sie können den Befehl setupTests in der Copilot Chat-Ansicht verwenden, um Hilfe beim Einrichten eines Test-Frameworks für Ihr Projekt zu erhalten.
Tests mit KI schreiben
Das Schreiben von Tests kann zeitaufwendig sein und wird oft vernachlässigt. Copilot kann den Prozess des Schreibens von Tests beschleunigen, indem es Testcode für Ihre Anwendung erstellt. Sie können es zum Schreiben von Unit-Tests, Integrationstests, End-to-End-Tests und mehr verwenden.
Um Tests mit Copilot in VS Code zu schreiben, können Sie eine der folgenden Methoden verwenden
-
Intelligente Aktionen im Editor
-
Wählen Sie optional einen Block von Anwendungscode aus
-
Klicken Sie mit der rechten Maustaste in den Editor und wählen Sie dann Copilot > Tests generieren
-
-
Chat-Prompts
-
Öffnen Sie die Anwendungs-Codedatei, für die Sie Tests generieren möchten
-
Öffnen Sie die Copilot-Edits (), die Chat-Ansicht (⌃⌘I (Windows, Linux Ctrl+Alt+I)) oder den Inline-Chat im Editor (⌘I (Windows, Linux Ctrl+I))
-
Geben Sie einen Prompt zum Generieren von Tests ein, z. B. Generiere Tests für diesen Code. Schließe auch Tests für Grenzfälle ein.
Fügen Sie Ihrem Prompt zusätzlichen Kontext hinzu, indem Sie
#filein den Prompt eingeben. Zum Beispiel: Generiere Tests für diesen Code #file:calculator.jsTippWeitere Beispiel-Prompts zum Generieren von Unit-Tests, Mock-Objekten oder End-to-End-Tests finden Sie in der GitHub Copilot-Dokumentation.
-
Copilot generiert Testfallcode für Ihren Anwendungscode. Wenn Sie bereits eine Testdatei haben, fügt Copilot die Tests dort hinzu oder erstellt bei Bedarf eine neue Datei. Sie können die generierten Tests weiter anpassen, indem Sie Copilot weitere Prompts geben. Sie können Copilot zum Beispiel bitten, ein anderes Test-Framework zu verwenden.
Sie können Copilot Ihre eigenen Spezialanweisungen zur Code-Generierung geben. Sie können Copilot zum Beispiel anweisen, ein bestimmtes Test-Framework, eine bestimmte Namenskonvention oder eine bestimmte Code-Struktur zu verwenden.
Erfahren Sie mehr über die Verwendung von Copilot in VS Code.
Tests ausführen und debuggen
Nachdem die Tests in Ihrem Projekt erkannt wurden, können Sie Ihre Tests direkt aus VS Code heraus ausführen und debuggen und Testergebnisse anzeigen.
Verwenden Sie im Test-Explorer die Steuerelemente in der Abschnittsüberschrift, um alle Tests auszuführen oder zu debuggen. Sie können auch bestimmte Tests in der Baumansicht ausführen oder debuggen, indem Sie das Ausführungs-/Debug-Symbol auf einem bestimmten Knoten auswählen.

Während Sie den Testcode im Editor anzeigen, verwenden Sie die Wiedergabesteuerung in der Editor-Spalte, um den Test an dieser Position auszuführen.

Klicken Sie mit der rechten Maustaste auf die Spaltensteuerung, um andere Aktionen anzuzeigen, wie z. B. das Debuggen des Tests.
Konfigurieren Sie die Standardaktion für die Spaltensteuerung mit der Einstellung testing.defaultGutterClickAction.
Nachdem Sie einen oder mehrere Tests ausgeführt haben, zeigen die Editor-Spalte und die Baumansicht im Test-Explorer den entsprechenden Teststatus (bestanden/fehlgeschlagen) an. Wenn ein Test fehlschlägt, wird die Testfehlermeldung als Overlay im Editor angezeigt.

Verwenden Sie die Schaltfläche Ausgabe anzeigen im Test-Explorer, um die Testausgabe im Bereich Testergebnisse anzuzeigen.

Copilot kann Ihnen helfen, fehlerhafte Tests zu beheben. Hovern Sie im Test-Explorer über die Baumansicht und wählen Sie die Schaltfläche Testfehler beheben (Glitzer) aus. Copilot schlägt eine Korrektur für den fehlerhaften Test vor. Alternativ können Sie den Befehl /fixTestFailure in Copilot Chat eingeben.

Testabdeckung
Die Testabdeckung ist ein Maß dafür, wie viel Ihres Codes von Ihren Tests abgedeckt wird. Sie hilft Ihnen, Bereiche Ihres Codes zu identifizieren, die nicht getestet werden. VS Code unterstützt das Ausführen von Tests mit Abdeckung und das Anzeigen von Abdeckungsergebnissen, wenn die entsprechende Test-Erweiterung die Testabdeckung unterstützt.
Sie können Tests mit Abdeckung ausführen, genauso wie Sie Tests ausführen und debuggen können. Verwenden Sie die entsprechenden Aktionen in der Test-Explorer-Ansicht, der Editor-Spalte oder Befehle in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

Nachdem Sie Tests mit Abdeckung ausgeführt haben, können Sie die Abdeckungsergebnisse an verschiedenen Orten anzeigen
-
In der Testabdeckungsansicht
Eine Baumansicht zeigt die Tests mit ihrem Abdeckungsprozentsatz an. Eine Farbanzeige gibt auch einen visuellen Hinweis auf den Abdeckungsprozentsatz. Hovern Sie über jede Zeile, um weitere Details zu den Abdeckungsergebnissen zu erhalten.

-
Als Overlay im Editor
Für Codedateien mit Testabdeckung zeigt der Editor ein Farboverlay in der Spalte an, um anzuzeigen, welche Zeilen von Tests abgedeckt werden oder nicht. Wenn Sie über die Spalte hovern, stellen Sie fest, dass für abgedeckte Zeilen auch eine Anzeige für die Anzahl der Ausführungen der Zeile vorhanden ist. Sie können auch die Schaltfläche Inline-Abdeckung anzeigen in der Titelleiste des Editors auswählen oder den Befehl Test: Inline-Abdeckung anzeigen (⌘; ⇧⌘I (Windows, Linux Ctrl+; Ctrl+Shift+I)) verwenden, um das Abdeckungs-Overlay umzuschalten.

-
In der Explorer-Ansicht, die den Abdeckungsprozentsatz Ihrer Codedateien anzeigt
Die Explorer-Ansicht zeigt den Abdeckungsprozentsatz Ihrer Codedateien. Hovern Sie über eine Datei oder einen Knoten im Explorer, um weitere Details zu den Abdeckungsergebnissen zu erhalten.

-
Im Diff-Editor
Wenn Sie einen Diff-Editor geöffnet haben, werden die Abdeckungsergebnisse auch im Diff-Editor angezeigt, ähnlich wie sie im Editor angezeigt werden.
Task-Integration
Aufgaben in VS Code können konfiguriert werden, um Skripte auszuführen und Prozesse innerhalb von VS Code zu starten, ohne eine Befehlszeile eingeben oder neuen Code schreiben zu müssen. In VS Code können Sie eine Standard-Testaufgabe definieren, die Ihre Tests ausführt, und optional Tastenkombinationen erstellen, um die Tests auszuführen.
Verwenden Sie den Befehl Tasks: Configure Default Test Task, um die Standard-Testaufgabe zu konfigurieren. VS Code versucht, die Testaufgabe automatisch zu erkennen, z. B. basierend auf Ihrer package.json-Datei. Nachdem Sie die Standard-Testaufgabe ausgewählt haben, wird die Datei tasks.json geöffnet, damit Sie die Aufgabe anpassen können.
Der folgende Codeausschnitt zeigt eine tasks.json-Datei, die den Befehl node --test als Standard-Testaufgabe angibt.
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "test",
"group": {
"kind": "test",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: test",
"detail": "node --test src/tests/**.js"
}
]
}
Um die Testaufgabe auszuführen, verwenden Sie den Befehl Tasks: Run Test Task oder erstellen Sie eine Tastenkombination für den Befehl.
Erfahren Sie mehr über die Verwendung und Konfiguration von Tasks.
Derzeit haben Aufgaben keine spezielle Integration in die Testfunktionalität von VS Code, sodass das Ausführen von Tests in einer Aufgabe die Benutzeroberfläche nicht aktualisiert. Einzelne Test-Erweiterungen können spezifische Testautomatisierungsfunktionen bereitstellen, die in die Benutzeroberfläche integriert werden.
Einstellungen für die Testkonfiguration
Es gibt mehrere Einstellungen, die Sie konfigurieren können, um das Testerlebnis in VS Code anzupassen. Jede Sprach-Erweiterung kann zusätzliche Einstellungen bereitstellen, die für das Testen in dieser Sprache spezifisch sind. Hier sind einige gängige Einstellungen, die Sie konfigurieren können
| Einstellungs-ID | Details |
|---|---|
| testing.countBadge | Steuert die Zählmarkierung für das Testsymbol in der Aktivitätsleiste |
| testing.gutterEnabled | Konfigurieren Sie, ob die Teststeuerung in der Editor-Spalte angezeigt werden soll |
| testing.defaultGutterClickAction | Konfigurieren Sie die Standardaktion, wenn die Teststeuerung in der Spalte ausgewählt wird |
| testing.coverageBarThresholds | Konfigurieren Sie die Farben für die Abdeckungsleistenschwellenwerte für die Testabdeckungsansicht |
| testing.displayedCoveragePercent | Konfigurieren Sie, welcher Prozentsatz im Testabdeckungsansicht angezeigt wird (gesamt, Anweisung oder Minimum) |
| testing.showCoverageInExplorer | Konfigurieren Sie, ob der Abdeckungsprozentsatz in der Explorer-Ansicht angezeigt werden soll |
Alle testbezogenen Einstellungen finden Sie im Einstellungseditor (⌘, (Windows, Linux Ctrl+,)).
Nächste Schritte
-
Erfahren Sie mehr über Copilot und KI-gestützte Tests in VS Code
-
Erfahren Sie mehr über die Verwendung und Konfiguration von Tasks